CSS :: 子元素在父元素悬停时更改颜色，但是自身悬停时也会更改颜色

Question

我有一个包含<span>子元素的<a>标签。我编写了一些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>

- HoGo

Answer 1

更新

以下内容适用于2013年。然而，现在我会使用如下所述的:not()选择器下面。

---

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>

- Raphael Rafatpanah

---

在子元素上重复两次绿色边框，用于悬停和非悬停状态，这是一种脆弱的解决方法。如果我们希望在非悬停状态下子元素没有CSS，那该怎么办？使用这种方法无法实现。 - johny why

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

- Blender