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

Question

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

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

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

Как сделать так, что, когда люди парят мой срок, это показывает «image_hover.png»?

Answer 1

.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 2

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

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

Internet Explorer 6 не будет заботиться ... но кто заботится о IE 6? :)

Answer 3

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

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

Answer 4

Алекс,

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

.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; 
}