我正在尝试删除悬停时的图像覆盖。我有以下代码在悬停时添加叠加层,但我希望它在未悬停时具有不透明度,并在悬停时移除该不透明度。
jQuery:
revapi1.on('revolution.slide.onloaded', function() {
revapi1.find('li').each(function() {
var slide = jQuery(this);
if(slide.find('.slidelink').length) {
slide.find('.slotholder').addClass('custom-hover');
}
});
});
CSS:
.rev_slider .custom-hover {
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.rev_slider:hover .custom-hover {
opacity: 0.5;
}
我试过以下方法。它可以工作,但我无法让它与上面的 Jquery 代码一起工作。 Fiddle
HTML:
<div class="wrap">
<figure class="tint">
<img src="http://cdn.impressivewebs.com/2011-11/greece001.jpg" alt="" width="400" height="260" />
</figure>
</div>
最佳答案
如果您想对不透明度执行 CSS 转换,您需要确保还有一个默认的不透明度属性。所以像这样:
.rev_slider .custom-hover {
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.rev_slider:hover .custom-hover {
opacity: 0.5;
}
关于javascript - 在悬停时删除图像覆盖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29779635/