JQuery fadeTo with text

Question

我创建了一个显示图片的网站。当您将鼠标悬停在其中一张图片上时，我希望它能够淡化为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);
   });
});

目前代码只会使我的图片淡入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;
}

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

<强> Demo