带有文本的 JQuery fadeTo

Question

我创建了一个显示图片的网站。当您将鼠标悬停在其中一张图片上时，我希望它 fadeTo 0.5 不透明度并且我希望出现文本。例如

悬停前的图片: http://i.imgur.com/2O5BQKB.png

悬停时的图片: http://i.imgur.com/Ik9S89d.png

到目前为止，这是我的代码:

$(document).ready(function(){  
   $('.hover').mouseenter(function(){     
      $(this).fadeTo(250, 0.5);
   });
   $('.hover').mouseleave(function(){   
      $(this).fadeTo(50, 1);
   });
});

目前代码只会让我的图片 fadeTo 0.5 不透明度，请帮助我添加文本

Answer 1

Fiddle

这应该让您了解前进的方向。需要注意的是，如果您正在淡化元素本身，其内容(任何文本)也会淡化。因此，最简单的解决方案是将您希望淡入淡出的元素包含在父元素中，并检测父元素上的悬停以触发子元素淡入淡出。

在父级中，您还会有一个元素来保存您的文本。

在下面的示例中，fadeThis 元素就是您的图片。

jQuery

$(document).ready(function () {
    $('.hover').mouseenter(function () {
        $(this).children('img').fadeTo(250, 0.5);
    });
    $('.hover').mouseleave(function () {
        $(this).children('img').fadeTo(50, 1);
    });
});

HTML

<a href="#" class="hover">
   <img src="http://9-4fordham.wikispaces.com/file/view/incandescent-light-bulbs-lg.jpg/244284051/incandescent-light-bulbs-lg.jpg" />
   <span>my text</span>
</a>

CSS

.hover {
    position:relative;
}
.hover img{
    position:absolute;
}
.hover span {
    position:absolute;
    display:none;
}
.hover:hover span {
    display:inline;
}