Hover change opacity

Question

I'm curently creating my own website and using siteorigin page builder on wordpress. The problem is they don't have an option for hover, so I created a custom css to make a hover effect on a background color. When I hover on a specific "div" or "child" of the background, it changes the opacity of this one differently than the rest. Here a picture to demonstrate the problem.

hover problem

As you can see, the blue are differents, with the same rule applied to the class of the background named ".featr".

Any help? Thanks

Answer 1

hover selector must follow the class so in this case it should be:

.featr:hover

and not:

.featr :hover

Yeah, but post all your code if you need help. I don't think you need the transition

in response to comment below So you need to state the start of background-color (.featr) and then the ending state (.featr:hover). transition takes the background css and eases Linearly for half a second. You should include all transition lines below because it works for differently for each browser.

.featr {
background:rgba(0,0,0,1);
-o-transition: background 0.5s linear;
-moz-transition: background 0.5s linear;
-khtml-transition: background 0.5s linear;
-webkit-transition: background 0.5s linear;
-ms-transition: background 0.5s linear;
transition: background 0.5s linear;
}

.featr:hover {
background:rgba(0,0,0,0.5);
}