Как мне изменить фоновое изображение при наведении, для моего диапазона?

Question

Предположим, у меня есть промежуток:

<span class="myspan"></span>

.myspan{
background: url(image.png) top left no-repeat;
}

Как мне сделать так, чтобы, когда люди наводили курсор на мой промежуток, он отображал "image_hover.png"?

Answer 1

Alex

Вы можете попробовать

.myspan:hover{background:url('image_hover.png') top left no-repeat;}

Вы также можете объединить image.png и image_hover.png в одно изображение png и просто переместить позицию при наведении. Ваш PNG будет выглядеть так: http://www.missgoodytwoshoes.com/images/nav_shop.png

И ваш код будет выглядеть так:

<span class="myspan"></span>

.myspan{
background: url(image.png) top left no-repeat;
height: 37px;
}
.myspan:hover
{
background-position:0 -37px;
}

Answer 2

Вы можете применить псевдокласс: hover к каждому элементу:

.myspan:hover
{
    background-image: url(image_hover.png);
}

Internet Explorer 6 не волнует ... но кого волнует IE 6? :)

Answer 3

.myspan:hover{
background-image:url('image_hover.png');
}

Но то, что вы действительно хотели бы сделать, это сделать одно изображение с обоими состояниями, естественным состоянием и состоянием наведения, одно рядом с другим. Тогда у вас будет:

.myspan{
width: *the width of only one state. aka half the width of the whole image*
background:url('image.png') top left no-repeat;
}

.myspan:hover{
background-postion:right;
}

Таким образом, только одно изображение загружается и при наведении, оно просто перемещает его слева направо. Отображение только одной половины изображения.

Answer 4

Используйте псевдокласс: hover:

.myspace:hover
{
    backbround: url(image-over.png) top left no-repeat;
}