html - 如何在背景图像 Sprite 上获取 'alt' 文本标签

Question

我有一个按钮(可以打开一个新的浏览器窗口)，所以我放置了 alternate_text 和 Title 标签——这样当鼠标悬停在上面时浏览器会显示弹出文本——通知用户将打开一个新窗口。

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

这很好用，但我现在想在鼠标悬停/单击时更改图像。通常我会使用背景 Sprite 图像(参见下面的 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;}

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

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

Answer 1

悬停时的文本不是由“alt”属性定义的，而是由“title”属性定义的，因此您可以在具有背景图像的常规 div 上使用它，并且它也适用于 Sprite ，如下所示:

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

.x:hover {
  background-position: 100px 0px;
}

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