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

Question

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

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;
}

查询

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

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

有任何想法吗？

Answer 1

你实际上不需要 jQuery。它可以通过纯 CSS 轻松实现。

在此示例中，我使用:after伪元素从altparent 的属性中添加内容div。你可以添加任何你想要的样式..

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;
} 

Answer 2

我会将您的图像包装在某种包装器中，然后将 CSS 用于悬停效果（DEMO）。

HTML：

<div class="img-wrapper">
  <img src="http://placekitten.com/150" alt="some text 1" />
  <div class="img-desc">some text 1</div>
</div>

CSS：

.img-wrapper {
  position: relative;
  display: inline;
}

.img-desc {
  display: none;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background: #FFF;
  opacity: 0.6;
  padding: 5px;
}

.img-wrapper:hover .img-desc{
  display: block;
}

我在演示中添加了一个带有额外 css 转换的替代解决方案。

要获得过渡，只需使用以下命令控制可见性opacity：

.img-desc {
  /*...*/
  opacity: 0;
  /*...*/
}

.img-wrapper:hover .img-desc{
  opacity: 0.6;
  transition: opacity 0.4s ease-in;
}

Answer 3

将您的 javascript 更改为：

$('img').hover(function() {
   $('div').html($(this).attr('alt')).fadeIn(200);
   $('div').css('left',$(this).offset().left + 'px');
   $('div').css('top',$(this).offset().top + $(this).height() - 20 + 'px');
}, function() {
   $('div').html('');
});

这应该可以解决问题。