Removing an overlay on hover in using css

Question

I am trying to create a situation where a colour overlay disappears on hover. I have manged to replicate on in a fiddle here.

Css used on the site is

.rev_slider .custom-hover:before {
 content: "";
 display: block;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background: rgba(0,255,255, 0.5);
 transition: all .3s linear;
}


.rev_slider .custom-hover:hover::before {
background: none !important;
}

However, when i apply the same principle on a slider on my site, it doesn't work. The overlay appears but when i hover over it, it does not disappear. When selecting the the hover element in inspect element for the div, the overlay disappears. The effect is applied on the first slide of my site whose link can be found here:

Help will be much appreciated.

Kresimir Pendic · Accepted Answer · 2015-04-21 22:37:07Z

1

It's becose your mouse is not hovering over .slotholder element, but over this one:

<a style="width:100%;height:100%;display:block" target="_self" href="#">

I suggest you try to target that element, but before you'll have to organize your html output to fit the structure that you have in jsfiddle, that works ok!

Hope that helps.. cheers

answered Apr 21, 2015 at 22:37

Kresimir Pendic

3,6471 gold badge24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user38208 Over a year ago

Thanks changing the structure and adding the class custom-hover to `<a style="width:100%;height:100%;display:block" target="_self" href="#">' inside of slotholder did the trick.

Collectives™ on Stack Overflow

Removing an overlay on hover in using css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related