如何在悬停时对背景图片进行更改？

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

使用：hover伪类：

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