Изменение фонового изображения с помощью jquery selector

-1

У меня есть следующая идея: контейнер содержит некоторую информацию, и я хотел бы изменить значок div с другим изображением с событием .hover. Вот мой контейнер div.Изменение фонового изображения с помощью jquery selector

<div class="column1"> 
     <span class="columnLogo"></span> 
     <span class="fTitle"><h5>Front-end Development</h5> 
      <img src="images/mini1.png"></span> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> 
    </div>

мне нужно изменить изображение первого элемента <span> при наведении на колонку.

источник

2013-12-05 dddexxx

Использование CSS с фоновыми-изображения для этого. Использование HTML, такие как:

<div class="column1"> 
    <span class="columnLogo"></span> 
    <span class="fTitle"><h5>Front-end Development</h5><img src="images/mini1.png"></span> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> 
</div>

И CSS, такие как:

.column1 .columnLogo { 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    background: url(images/logo.png) no-repeat center; 
} 
.column1:hover .columnLogo { 
    background-image: url(images/logo-hover.png); 
}

источник

2013-12-05 16:02:09

Спасибо. Можно ли выбрать несколько классов до: hover? Как .column1, column2: hover? – dddexxx

Да - но вы должны включить: наведите курсор на каждый из них и запомните '.' - например: '.column1: hover, .column2: hover' –

Как насчет

$(".column1 img")

...

источник

2013-12-05 15:57:50 tymeJV

.column1:hover{ 
    background: #f0f0f0 url('my-image.jpg'); 
}

источник

2013-12-05 15:57:58 mehdi

Это, как я выбрать столбец, но мне нужно изменить образ первого элемента при наведении на столбец. Надеюсь, теперь это ясно. – dddexxx

, если вы можете работать с css, это лучший способ. Вы можете установить изображение на фон контейнера div. – mehdi

Вы можете превратить IMG в пролете с фоном mini1.png и управления CSS-де-парении этого диапазона.

<div class="column1"> 
    <span class="columnLogo"></span> 
    <span class="fTitle"><h5>Front-end Development</h5> 
     <span class="myimageclass">&nbsp;</span> 

     </span> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. </p> 
</div>

CSS:

.myimageclass{background:url("images/mini1.png");} 
    .myimageclass:hover {background:url("images/mini2.png");}

источник

2013-12-05 16:10:09 DGA

Изменение фонового изображения с помощью jquery selector

ответ

Смежные вопросы