CODEWITHSUNDEEP
jqueryhtmlcss
user38208
user38208

Reputation: 1094

Removing an overlay on hover in using css

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.

Upvotes: 1

Views: 1391

Answers (1)

Kresimir Pendic
Kresimir Pendic

Reputation: 3614

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

Upvotes: 1

Related Questions