Question

我有一个按钮（打开一个新的浏览器窗口），所以我放了alternate_text＆amp;标题标签 - 因此浏览器在悬停时显示弹出文本 - 通知用户将打开一个新窗口。

<img class="mp3PlayBtn alt="Mp3 player opens in popup window" title="Mp3 player opens in popup window" src="https://cdn.shopify.com......."  />

这很好用，但我现在想要在悬停/点击时更改图像。通常我会使用背景精灵图像（见下面的CSS）

.mp3PlayBtn {
background-image:url('https://cdn.shopify.com......Mp3PlayButton.png');     background-repeat: no-repeat;   
height: 30px; width:40px;
background-position: 0px 0px; 
} 
.mp3PlayBtn:hover  {background-position: 0px -28px;} 
.mp3PlayBtn:active {background-position: 0px -58px;}

但由于它是背景图片，因此不会显示弹出文字。

如何保留弹出文本并使用精灵来更改图像？或者必须放弃精灵？

Answer 1

悬停时的文字不是由＆＃34; alt＆＃34;定义的。属性，但由＆＃34;标题＆＃34;属性，因此您可以在具有背景图像的常规div上使用它，并且它也适用于精灵，如下所示：

＆＃13;

.x {
  background: url(http://placehold.it/200x100/fa0);
  width: 100px;
  height: 100px;
  border: 1px solid #999;
}

.x:hover {
  background-position: 100px 0px;
}

＆＃13;

<div class="x" title="Here I am"></div>

＆＃13;

Answer 2

在可访问性方面，es2015.priomise属性很少被屏幕阅读器等辅助技术使用。

因此，您可以使用title属性，因为它有助于显示鼠标事件的工具提示，但您必须联合使用title属性。

aria-label

当然，您必须使用<button id="mp3PlayBtn" aria-label="Mp3 player opens in popup window" title="Mp3 player opens in popup window"></button>元素才能处理原生button值并更正咏叹调角色定义。

怎么得到一个＆＃39; alt＆＃39;背景图片精灵上的文字标签

2 个答案: