Is there any way to change an element's css while focusing or hovering on one of it's children?
Ex: while I move my mouse on A, B's background color changes. if B is a descendant A, it is possible.
--A
-----B
using #A:hover #B { background-color: blue }
in sibling:
---A
---B
It is : #A:hover ~ #B { background-color: blue; }
assume B is a descendant of A.
what if I want to change #A background, while I am hovering on B. how could it be?
--A
-----B
Doing this in pure CSS is unfortunately not possible...at this time. However, there is supposedly an upcoming parent selector that would work well in this scenario. Click here for more info.
In the meantime, you can also use javascript and/or jquery to accomplish this pretty easily.
HTML
<div id="div1">
div 1 area
<p id="paragraph">
This is paragraph
</p>
</div>
CSS
#div1 {
border:1px solid lightgray;
}
p {
margin: 50px;
background-color: lightblue;
padding: 8px;
}
.altbg {
background:grey;
}
jQuery
$(function(){
$('#paragraph').mouseenter(function(){
$(this).parent().addClass('altbg')
}).mouseout(function(){
$(this).parent().removeClass('altbg')
});
});
It is actually possible in css. Somebody made this fiddle: http://jsfiddle.net/u7tYE/
#a:hover + #b {
display:block;
background-color:rgb(200,200,150);
}
#b{display:none;background-color:rgb(200,200,150;}<a id="a">Menu</a>
<div id="b">
<p>Home</p>
<p>About</p>
<p>Login</p>
</div>It works perfectly.
