我想在悬停(或点击)时优雅地注释图像,其中包含该图像的alt标签的内容。我只想使用CSS(如果可能的话),不想使用jQuery,因为页面非常简单,我不想要任何多余的东西。
虽然我目前不能写JS,但我只能找到使用jQuery的类似示例:显示图像的alt标签 - jquery
谢谢。
使用 HTML5 <figure>
元素,您可以使用 <figcaption>
元素来显示图像的描述。这是您想要实现的目标的语义方法。alt
属性适用于无法加载图像且与figcaption
不同的情况。
<figure>
<img src="/random-image.jpg" alt="Alt description">
<figcaption>Here comes the description</figcaption>
</figure>
您可以通过CSS隐藏figcaption
,然后点击(或单击)显示它。
你不能按照正确的说法使用 :before 或 :after@Pointy。这是一个自闭合元素,因此没有内容。仅属性。
但是,如果您可以控制实际替代文本的位置,则可以执行以下操作。它利用了content/attr CSS属性/组合。有关此内容的详细信息,请参阅David Walsh的帖子。
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 属性中添加替代文本。