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

Question

除了作为精灵之外，是否可以仅使用 css/html 执行类似的操作？

请原谅这个糟糕的例子。我只是想弄清楚这一点。

示例

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