【问题标题】：CSS :: child set to change color on parent hover, but changes also when hovered itselfCSS :: child 设置为在父悬停时更改颜色，但在悬停时也会更改
【发布时间】：2013-01-25 09:35:35
【问题描述】：

我有一个<a> 和一个<span> 孩子。我写了一些 CSS，当父级悬停时它会改变子级的边框颜色，但是当我悬停子级时它也会改变边框颜色，这是不应该的。

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>

【问题讨论】：

标签： html css hover parent-child

【解决方案1】：

更新

以下内容对 2013 年有意义。但是，现在，我将使用 :not() 选择器，如 below 所述。

CSS 可以被覆盖。

演示：http://jsfiddle.net/persianturtle/J4SUb/

使用这个：

.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>

【讨论】：

在子节点上重复绿色边框两次，对于悬停和非悬停状态，是一个脆弱的解决方法。如果我们希望在悬停状态下的孩子没有 css 怎么办？用这种方法做不到。

【解决方案2】：

如果您不关心支持旧浏览器，可以使用:not() 排除该元素：

.parent:hover span:not(:hover) {
    border: 10px solid red;
}

演示：http://jsfiddle.net/vz9A9/1/

如果您确实想要支持它们，我想您将不得不使用 JavaScript 或再次覆盖 CSS 属性：

.parent span:hover {
    border: 10px solid green;
}

【讨论】：