我目前正在使用带有 Javascript 的当前 HTML 标记来创建带有内嵌图像的文本链接，该图像会在文本悬停时“滚动”。
<div><a id="link" href="page.html"
onmouseover="rollover(this.id,'over');"
onmouseout="rollover(this.id,'out')"
>Link</a><img id="linkButton" src="image.gif" /></div>
重要的是图像是内联的，这样我可以轻松地创建具有不同文本长度的新文本链接。
我想尝试在没有 Javascript 的情况下完成此操作，并使用包含翻转的结束和结束状态的单个图像，因此可能使用背景位置技巧。
最佳答案
您需要在 CSS 中使用 background-image(或仅使用 background)。这是一个例子 http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
关键是在链接元素上使用伪类。例如:
a:hover
a:active
a:visited
您还可以使用 inline-block 使 a 不完全是 block 元素。您可能需要为其设置宽度和高度。请记住，display:inline-block 在 IE7 中效果不是很好，如果您仍然需要支持的话。
这里有一些关于使用 CSS Sprites 的额外提示
关于CSS 使用内联图像翻转创建文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14166973/