透明度上一个div悬停

到目前为止，我已经有了这个代码透明度上一个div悬停

，但我想淡出，以便只留下文字中可见的图像。我是否需要更改JavaScript或编写新的CSS分区？

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

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

来源

2013-03-20 Hristian Ivanov

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

只需添加.fadeToggle()到img元素，以及：

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

JSFiddle example。

来源

2013-03-20 13:18:00

秒:) – Archer 2013-03-20 13:19:03

完美，谢谢。例如，我可以为这个淡出添加一个时间，例如需要更长的时间，例如5秒？ – 2013-03-20 13:19:29

@HristianIvanov fadeToggle（5000）//毫秒 – 2013-03-20 13:22:08

如果你想淡入文字和淡出图像，只需增加一个行：

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

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

来源

2013-03-20 13:18:34

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

来源

2013-03-20 13:18:57 sasi

这是你在找什么？

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

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

来源

2013-03-20 13:19:06

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

来源

2013-03-20 13:19:41 isherwood

这里是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

来源

2013-03-20 13:21:02

+1可能是值得注意的唯一答案：D – fresskoma 2013-03-20 13:22:11

太好了，非常感谢，很完美，同时也是最简单的方法。 – 2013-03-20 13:28:58

透明度上一个div悬停

回答

相关问题