CODEWITHSUNDEEP
css
Careless
Careless

Reputation: 45

Change color on hover on another div

.menu:hover ~ .mts, .menu:hover ~ .mts2{

    background: #666666;

}

I have 3 divs and frist one is class=menu which is the main one, other two are inside him. On hover the main one I want to change color for those two... Why this is not working I saw on answers this answer but still it is not working.

Upvotes: 1

Views: 56

Answers (3)

Debabrata Mohanta
Debabrata Mohanta

Reputation: 645

check out this pen : http://codepen.io/Debabrata89/pen/WwKKYQ

.menu:hover  .mts, .menu:hover .mts2{
     background: orange;
}

Upvotes: 0

bax
bax

Reputation: 119

try this:

.menu:hover > .mts,  .menu:hover > .mts2 { background: #666666; }

If it does not work the background property may be overridden by some inline css of other rules somewhere else, in that case you may try to apply !important as last solution

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10207

If .menu is parent then no need to use ~ a space is enough.

.menu:hover .mts, .menu:hover .mts2{
    background: #666666;
}

~ means next siblings not children's.

Upvotes: 1

Related Questions