我可以在不使用JavaScript的情况下在悬停在元素上时更改图像吗？

Question

是否有可能做这样的事情，除了作为精灵，只使用css / html？

请原谅这个可怜的榜样。我只想弄清楚这一点。

Example

Answer 1

是的，您只需将两个图像放在一起，然后使用background-position样式更改图像的哪个部分。

我将它应用到您的示例中，但我只使用其中一个图像的上半部分和下半部分：

http://jsfiddle.net/Guffa/Lx4tp/2/

HTML：

<a class="link">Buy Now<a/>

CSS：

.link {
   width:100px;
   height:12px;
   background: #fff url('http://server2.iconfinder.com/data/icons/prettyoffice/24/add1-.png') no-repeat right 0;
   display:block;
}

.link:hover {
    background-color: #f4f4f4;
    background-position: right -12px;
}

Answer 2

您是否正在尝试创建悬停或更多内容？ http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover

Answer 3

是的，你可以用精灵来做到这一点。您只需要更改悬停规则的背景位置。

.link {
   background-image: url('sprite.png');
   background-position: 0 0;
}

.link:hover {
   background-position: 0 -10px;
}