Question

我目前正在使用这个当前的HTML标记和Javascript来创建带有内嵌图像的文本链接，以及＃34;翻转＆＃34;在文字悬停。

<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的情况下完成此操作，并使用包含翻转的过度和结束状态的单个图像，因此可能使用背景位置技巧。

Answer 1

您需要在CSS中使用background-image（或仅background）。以下是http://www.webvamp.co.uk/blog/coding/css-image-rollovers/

的示例

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

a:hover
a:active
a:visited

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

以下是使用CSS Sprites

的一些其他提示

CSS使用内嵌图像翻转创建文本

1 个答案: