css - 图像鼠标悬停上的文本 - CSS 定位

Question

我正在使用这个分支代码在鼠标悬停在图像上时显示文本。

http://codepen.io/anon/pen/hxqoe

HTML

<img src="http://placekitten.com/150" alt="some text" />
<img src="http://placekitten.com/150" alt="more text" />
<img src="http://placekitten.com/150" alt="third text" />

<div id="text"></div>

CSS

div {
  display: none;
  position: absolute;
}

img:hover + div {
  display: block;
}

JQUERY

$('img').hover(function() {
   $('div').html($(this).attr('alt')).fadeIn(200);
}, function() {
   $('div').html('');
});

我正在寻找要在每个图像中显示的 div 文本，而不是固定的 div。

有什么想法吗？

Answer 1

您实际上不需要为此使用 jQuery。可以使用纯 CSS 轻松实现。

在这个例子中，我使用 :after 伪元素来添加来自父 div 的 alt 属性的内容。您可以添加任何您想要的样式..

jsFiddle here - 更新为包括淡入淡出

HTML - 非常简单

<div alt="...">
  <img src="..."/>
</div>

CSS

div {
    position: relative;
    display: inline-block;
}

div:after {
    content: attr(alt);
    height: 100%;
    background: rgba(0, 0, 0, .5);
    border: 10px solid red;
    position: absolute;
    top: 0px;
    left: 0px;
    display: inline-block;
    box-sizing: border-box;
    text-align: center;
    color: white;
    padding: 12px;
    font-size: 20px;
    opacity: 0;
    transition: 1s all;
    -webkit-transition: 1s all;
    -moz-transition: 1s all;
}

div:hover:after {
    opacity: 1;
}