javascript - div 悬停时的不透明度

Question

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

http://jsfiddle.net/Nq79H/1/

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

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

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

Answer 1

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

只需添加.fadeToggle()到img元素中：

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

JSFiddle 示例。

Answer 2

这是 CSS3 过渡解决方案：

jsFiddle

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 开始支持它。虽然转换效果很好，但当某些东西不支持它时，它们不会崩溃和烧毁。元素的不透明度仍然会改变，只是没有过渡。

参考

• Caniuse.com 过渡

Answer 3

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

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

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

Answer 4

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

Answer 5

这是你要找的吗？

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

http://jsfiddle.net/Nq79H/4/

Answer 6

不需要 JS 或额外的 HTML。

http://jsfiddle.net/Nq79H/11

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