带文本的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

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

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

在下面的示例中，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;
}

Answer 2

这是一个只有CSS的解决方案：

HTML

<div><span>Text here</span></div>

CSS

div {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;    
    width: 100px;
    padding: 40px 0;
    background: rgba(217, 210, 23, 1);
    border-radius: 120px;
    text-align: center;
}
div span {
    visibility: hidden;
}
div:hover {
    background: rgba(217, 210, 23, 0.5);
}
div:hover span {
    visibility: visible;
}