Question

我可以将this添加到图片中吗？我试过但它不起作用。

img[title]:hover:after {
  content: attr(title);
  padding: 3px 3px 3px 3px;
  margin-top: 4px;
  background: #000;
  position: absolute;
  z-index: 9999;
}

<img title="Online" alt="Online" height="16px" style="margin-top:-5px;" src="https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png">

Answer 1

由于伪元素do not work带有img，我建议你将它包装在div内，然后使用属性。使用可以使用data-*属性替换图像的title属性。

＆＃13;

.image-container:hover:after {
  content: attr(data-title);
  padding: 3px 3px 3px 3px;
  margin-top: 4px;
  background: #000;
  position: absolute;
  z-index: 9999;
  color: #fff;
}

＆＃13;

<div class="image-container" data-title="Online">
  <img alt="Online" height="16px" style="margin-top:-5px;" src="https://cdn0.iconfinder.com/data/icons/weboo-2/512/tick.png">
</div>

＆＃13;

使用attr（）在图像上显示标题

1 个答案: