我有大约 10 个按钮,每个按钮都有图像文本和悬停状态。 我想要做的是使用背景位置、宽度和高度来仅显示背景图像 Sprite 的一部分,并使用悬停背景位置来显示悬停样式。 我还将在元素上使用图像替换类,以便它保持可访问和可索引。
所以(测量是随机的):
[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 交换悬停时的图像。
两者在可访问性和机器人方面有什么区别吗?
谢谢。
最佳答案
你所做的是正确的。不要忘记向该链接添加 display: block;
。您还可以做的其他事情是将实际的链接文本放入跨度中,然后将该跨度绝对定位在屏幕之外。就像这样:
<a href="" title="Test link"><span>Home page</span></a>
在你的 css 文件中:
a > span {position: absolute; top: -10000px;}
关于css - 与背景图像的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9874355/