.class a:hover 与 .class:hover a

Question

找不到我一直想知道的问题的答案。

.class2 a:hover {}和.class2:hover a {}有区别吗？还是偏爱其中之一？

我一直在使用 .class2 a:hover {} 来改变锚点悬停时的锚点（即：锚文本颜色），但是当我想改变 div 时也保持锚点（即：锚颜色和 div 背景颜色都会在悬停时改变），我必须使用 .class2:hover a {} 才能工作。在这样做的过程中，我对两者之间的区别感到困惑，因为它们的写法非常相似。

谢谢！

编辑
编辑问题更清楚。感谢您解开我的脑筋:)

Answer 1

我的理解是这样的：

当悬停 a 标签时，

.class2 a:hover 将定位 .class2 元素内的任何超链接标签。

当悬停 .class2 时，

.class2:hover a 将定位 .class2 元素内的任何超链接 a 标签。

区别在于您将鼠标悬停在哪个元素上以更改这些样式规则。

示例：

.box{
  background: red;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
}
.case1 a:hover {
  background: blue;
}  

.case2:hover a {
   background: green;
}

<html>
  <body>
    <div class="box case1"><a href="#">case 1</a></div>
    <div class="box case2"><a href="#">case 2</a></div>
  </body>
</html>

在这种情况下，您想将鼠标悬停在 .class2 元素还是 a 元素上？

Answer 2

是的。有区别。

从行为上看，这似乎没有区别，但如果您在 <a> 标记周围添加边距，您可能会发现第一个选择器 (.class2 a:hover {}) 将停止按预期工作。

Answer 3

.class2 a:hover {}

根据上面的内容，如果 .class 元素有填充或其他内容，如果 .class 元素悬停在另一个元素上，则样式仅适用于 a .class 元素的部分不会触发 a

的悬停样式

.class2:hover a {}

如果悬停 .class2 元素的任何部分（填充、内容等），以上内容将触发 a 的悬停样式。

工作 fiddle here.

Answer 4

.class:hover a 当鼠标悬停在 class 的任何部分时选择 a link 而 .class a:hover 选择 a link 仅当 a link 悬停在

上时

Answer 5

在 class2:hover 中，您将激活嵌套在 class 中的所有元素下的 CSS class。这包括如果您想在 link 的边界外添加填充。

在 class2 a:hover 中，CSS class 仅当您专门将鼠标悬停在 link 上时才会激活。否则，class 将被忽略。

希望对您有所帮助！

.class a:hover 与 .class:hover a

.class a:hover vs .class:hover a

css

hover