.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.
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.
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
check out this pen : http://codepen.io/Debabrata89/pen/WwKKYQ
.menu:hover .mts, .menu:hover .mts2{
background: orange;
}
