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.
The below made sense for 2013. However, now, I would use the :not()
selector as described below.
CSS can be overwritten.
DEMO: http://jsfiddle.net/persianturtle/J4SUb/
Use this:
.parent {
padding: 50px;
border: 1px solid black;
}
.parent span {
position: absolute;
top: 200px;
padding: 30px;
border: 10px solid green;
}
.parent:hover span {
border: 10px solid red;
}
.parent span:hover {
border: 10px solid green;
}
<a class="parent">
Parent text
<span>Child text</span>
</a>