CSS How to apply child:hover but not parent:hover
Posted
by CNelson
on Stack Overflow
See other posts from Stack Overflow
or by CNelson
Published on 2010-04-23T17:49:55Z
Indexed on
2010/04/23
17:53 UTC
Read the original article
Hit count: 520
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>
© Stack Overflow or respective owner
