Javascript div悬停时的不透明度

到目前为止，我已经得到了这个密码

但我想淡出图像，以便只留下可见的文本。 我需要更改javascript还是编写新的css div

$('.text').hide().removeClass('text').addClass('text-js');

$('.thumb').hover(function(){
    $(this).find('.text-js').fadeToggle();
});

…但我想淡出图像，以便只留下可见的文本

只需将

.fadeToggle（）

添加到

img

元素中：

$('img', this).fadeToggle();

---

.

如果要淡入文本并淡出图像，只需再添加一行：

$('.text').hide().removeClass('text').addClass('text-js');

$('.thumb').hover(function(){
    $(this).find('.text-js').fadeToggle();
    $(this).children("img").fadeToggle();
});

---

这就是你要找的吗

$('.thumb').hover(function(){
$(this)
    .find('.text-js')
        .fadeToggle()
    .end()
    .find('img')
        .fadeToggle();
});

---

无需JS或其他HTML

---

以下是CSS3转换解决方案：

CSS

.thumb .text {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #999;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    -webkit-transition:opacity .5s ease;
    -moz-transition:opacity .5s ease;
    transition:opacity .5s ease;
    opacity:0;
}
.thumb:hover .text {
    opacity:1;
}

.thumb img {
    opacity:1;
    -webkit-transition:opacity .5s ease;
    -moz-transition:opacity .5s ease;
    transition:opacity .5s ease;
}
.thumb:hover img {
    opacity:0;
}

支持

现在对CSS3转换的支持相当不错，所有主要浏览器（Safari、Chrome、Opera、Firefox）的最新版本都支持转换。另一方面，IE只支持版本10中的版本。过渡是很好的，因为当某些东西不支持它时，它们不会崩溃和烧毁。元素的不透明度仍然会改变，只是没有过渡

参考资料

---

太好了，谢谢。例如，我可以为该淡入添加更长的时间（例如5秒）吗？@HristianIvanov fadeToggle（5000）//milliseconds@HristianIvanov是的，你可以。您可以将毫秒传递到函数：

。例如，fadeToggle（5000）

，将使动画耗时5秒。非常好，非常感谢，效果非常好，同时也是最简单的方法。

.thumb img {
    -moz-transition: opacity .8s;
    -webkit-transition: opacity .8s;
    transition: opacity .8s;
}
.thumb:hover img {
    opacity: 0;
}

.thumb .text {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #999;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    -webkit-transition:opacity .5s ease;
    -moz-transition:opacity .5s ease;
    transition:opacity .5s ease;
    opacity:0;
}
.thumb:hover .text {
    opacity:1;
}

.thumb img {
    opacity:1;
    -webkit-transition:opacity .5s ease;
    -moz-transition:opacity .5s ease;
    transition:opacity .5s ease;
}
.thumb:hover img {
    opacity:0;
}