I have an <a>
with a <span>
children. I have written some CSS which changes the border-color of the children when the parent is hovered, but it also changes the border-color when I hover the children, which it shouldn't.
a {_x000D_
padding: 50px;_x000D_
border: 1px solid black;_x000D_
}_x000D_
_x000D_
a span {_x000D_
position: absolute;_x000D_
top: 200px;_x000D_
padding: 30px;_x000D_
border: 10px solid green;_x000D_
}_x000D_
_x000D_
a:hover span {_x000D_
border: 10px solid red;_x000D_
}
_x000D_
<a>_x000D_
Parent text_x000D_
<span>Child text</span> _x000D_
</a>
_x000D_
This question is related to
html
css
hover
parent-child
If you don't care about supporting old browsers, you can use :not()
to exclude that element:
.parent:hover span:not(:hover) {
border: 10px solid red;
}
Demo: http://jsfiddle.net/vz9A9/1/
If you do want to support them, the I guess you'll have to either use JavaScript or override the CSS properties again:
.parent span:hover {
border: 10px solid green;
}
Source: Stackoverflow.com