对于我的跨度，如何在悬停时更改背景图像？

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

您可以将：hover伪类应用于每个元素：

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

Internet Explorer 6不关心......但是谁关心IE 6？ ：）

Answer 3

亚历，

你可以尝试

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

使用：hover伪类：

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