如何在懸停時更改背景圖像，以適應我的跨度？

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