Question

我有10个按钮，每个按钮都有图像文本和悬停状态。我想要做的是使用背景位置，宽度和高度来仅显示背景图像精灵的部分和悬停背景位置以显示悬停样式。我还将在元素上使用图像替换类，以使其保持可访问性和可索引性。

所以（测量是随机的）：

[CSS]

.menu{background-image:url(path/to/sprite.png);}
.button-1{width:200px;height:30px;background-position:0 0;}
.button-1:hover{background-position:0 -30px;}
.button-2{width:250px;height:30px;background-position:100px 0;}
.button-2:hover{background-position:100px -30px;}
/* Image Replacement Class (H5BP, @necolas && BEM) */
.ir{border:0;font:0/0 a;text-shadow:none;color:transparent;background-color:transparent;}

[HTML]

<a href="someLink.html" class="menu button-1 ir">Button 1</a>
<a href="someOtherLink.html" class="menu button-2 ir">Button 2</a>

我想知道的是，如果这是一种很好的方式，或者应该采取不同的方式，例如：

<a href="someLink.html"><img src="image.png" width="200" height="30" alt="Button 1"/></a>

然后使用JavaScript在悬停时交换图像。

两者在可访问性和机器人方面有什么区别吗？

谢谢。

Answer 1

你在做什么是正确的。不要忘记在该链接中添加display: block;。您可以做的其他事情是将实际链接文本放在跨度中，然后将该跨度绝对定位在屏幕外。像这样：

<a href="" title="Test link"><span>Home page</span></a>

在你的css文件中：

a > span {position: absolute; top: -10000px;}

链接与背景图像

1 个答案: