Question

到目前为止，我已经有了这段代码

但是我希望淡出图像以便只留下文字可见。我是否需要更改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 example

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 transitions

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

div上的不透明度悬停

6 个答案: