Question

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

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伪元素添加父alt的{{1}}属性中的内容。你可以添加你想要的任何样式..

jsFiddle here - 已更新以包含淡入淡出

HTML - 非常简单

div

<强> CSS

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

Answer 2

将您的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('');
});

这应该可以解决问题。

Answer 3

我会将您的图像包装在某种包装中，然后使用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;
}

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

3 个答案: