CSS: Hover effect is triggered when hovering over element without hover pseudo element attached

1

Hi all!

The intention is to have the child element changed to blue when the mouse cursor is hovering over the parent container, and not when the mouse cursor is hovering over the child element. So in my stylesheet, I have hover ‘attached’ to the parent container. However, when my mouse cursor hovers over the child element (and not hovering over any part of the parent container), it still changes the child element to blue.

Appreciate any insight on this, thanks!

HTML

<div id="parent">Parent
    <div class="child">Child
    </div>
/div>

CSS

div{  
    outline:1px solid red;
		margin: 2px;
}

#parent{    
    width:200px;
    height:30px;  
}

.child{
    width:50px;
    height:200px;
    background-color:yellow;
		border: 1px solid blue;
		transform: translatey(30px);   
}

#parent:hover .child{
	background-color:blue;
}

Jsfiddle link

2 
<style>
div{  
    outline:1px solid red;
		margin: 2px;
}
#parent{    
    width:200px;
    height:30px;  
}
#child{
    width:50px;
    height:200px;
    background-color:yellow;
		border: 1px solid blue;
		transform: translatey(30px);   
}
#parent:hover + #child{
background-color:blue;
}
</style>
<div id="parent">Parent</div>  
<div id="child">Child </div>
/*
 1. your child is inside parent,so you hover child also consider hover parent.
2. you may have multiple elements using same class, so better use id which is unique.
*/
3

You can also try adding this line to the css

.child:hover {background-color:yellow!important;}

But the solution of separating #parent and .child is better