CSS How to apply child:hover but not parent:hover
- by CNelson
With the following html, when I hover over child, I get a green background on parent. How can I stop that from happening? I do want the green background if I am hovering outside of the child element.
CSS3 is fine.
<style>
.parent { padding: 100px; width: 400px; height:400px; }
.parent:hover { background-color: green; }
.child { padding: 100px; width: 200px; height:200px; }
.child:hover { background-color: blue; }
</style>
<div class="parent">
<div class="child">Child</div>
</div>
