Question

我想优先使用该图片的alt标签的内容悬停（或点击）图片。我只想使用CSS（如果可能的话），并且不想使用jQuery，因为页面非常简单，我不想要任何多余的东西。

虽然我目前无法编写JS，但我只能找到使用jQuery的类似示例：display alt tag for image using this - jquery

谢谢。

Answer 1

使用HTML5 <figure>元素，您可以使用<figcaption>元素显示图像的描述。它是您想要实现的事物的语义方法。 alt属性适用于无法加载图片且与figcaption不同的内容。

<figure>
  <img src="/random-image.jpg" alt="Alt description">
  <figcaption>Here comes the description</figcaption>
</figure>

您可以通过CSS隐藏figcaption，然后点击（或点击）显示它。

Answer 2

你不能使用：在@Pointy之前或之后正确地说。这是一个自我关闭的元素，所以没有内容。只有属性。

但是，如果您可以控制实际替代文字的去向，则可以something like this。其中使用了content / attr CSS属性/组合。有关详细信息，请参阅David Walsh's post。

div {
    position:relative;
    width:500px;
    height:300px;
}

div:after {
    position:absolute;
    bottom:0;
    right:0;
    padding:10px;
    content:attr(data-alt);
    color:#FFF;
    background:#000;
}

其次是HTML

<div data-alt="Sample Alt Text">
    <img src="//placeimg.com/500/300/any" />
</div>

编辑：如果要进行页面验证，请确保同时向img添加alt属性。要么空alt=""，提供屏幕阅读器就能读出CSS内容（我对此不是100％肯定，可能取决于屏幕阅读器）。或者也在alt属性中添加alt文本。

使用alt标签优雅地注释图像

2 个答案: