0

我目前正在使用带有 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 的情况下完成此操作，并使用包含翻转状态的单个图像，因此可能使用背景位置技巧。

4

1 回答 1

0

您需要在 CSS中使用background-image（或只是）。background这是一个示例http://www.webvamp.co.uk/blog/coding/css-image-rollovers/

关键是在链接元素上使用伪类。例如：

a:hover
a:active
a:visited

您也可以使用inline-block它，使其a不完全是块元素。您可能需要为其设置宽度和高度。display:inline-block如果您仍然需要支持，请记住在 IE7 中效果不佳。

这里有一些关于使用CSS Sprites的额外提示

于 2013-01-05T00:10:30.053 回答