[英]Removing image overlay on hover
I am trying to remove an image overlay on hover. 我正在尝试在悬停时删除图像覆盖。 I have the following code that adds an overlay on hover but I want it to have an opacity when not hovered upon and remove that opacity when hovered.
我有以下代码在悬停时添加了一个叠加层,但是我希望它在不悬停时具有不透明性,并在悬停时消除该不透明性。
jQuery: 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: 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;
}
I have tried the following. 我尝试了以下方法。 It works but I can't get it to work with the Jquery code above.
它可以工作,但是我无法使其与上面的Jquery代码一起工作。 Fiddle
小提琴
HTML: HTML:
<div class="wrap">
<figure class="tint">
<img src="http://cdn.impressivewebs.com/2011-11/greece001.jpg" alt="" width="400" height="260" />
</figure>
</div>
If you want to perform a CSS transition on opacity, you'll need to make sure that there is a default opacity property as well. 如果要对不透明度执行CSS转换,则需要确保还具有默认的不透明度属性。 So something like this:
所以像这样:
.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.