CSS :: child set to change color on parent hover, but changes also when hovered itself

Question

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 {
    padding: 50px;
    border: 1px solid black;
}

a span {
    position: absolute;
    top: 200px;
    padding: 30px;
    border: 10px solid green;
}

a:hover span {
    border: 10px solid red;
}

<a>
    Parent text
    <span>Child text</span>    
</a>

score 87 · Accepted Answer · edited Jun 20 '20 at 09:12

87

Update

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>

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 09 '13 at 23:11

Raphael Rafatpanah

19,082
25
92
158

Repeating green border on child twice, for hover and non-hover states, is a brittle workaround. What if we want NO css on child in hon-hover state? Can't do that with this method. – johny why Jun 08 '18 at 22:42

score 12 · Answer 2 · answered Feb 09 '13 at 22:59

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;
}

CSS :: child set to change color on parent hover, but changes also when hovered itself

2 Answers2

Update

Linked