Question

无法找到我一直想知道的答案。

.class2 a:hover {}和.class2:hover a {}之间有区别吗？或者偏爱一个而不是另一个？

我一直在使用.class2 a:hover {}来改变锚定悬停上的锚点（即：锚文本颜色），但是当我想要改变持有锚点的div时（即：锚点颜色和div）背景颜色在悬停时都会发生变化），我不得不使用.class2:hover a {}来实现它。在这样做的过程中，我对两者之间的区别感到困惑，因为两者之间的区别相似。

谢谢！

修改
编辑问题要更清楚。谢谢你解开我的大脑：）

Answer 1

我的理解是：

当.class2 a:hover标记悬停时，

.class2会定位a个元素中的所有超链接标记。

当.class2:hover a悬停时，

a会定位.class2元素中的任何超链接.class2标记。

区别在于您为了更改这些样式规则而悬停的元素。

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

在这种情况下，您要悬停.class2元素还是a？

Answer 2

.class2 a:hover {}

通过上述方式，当a元素专门悬停时，如果a元素具有填充或其他内容，则该样式仅适用于.class，将鼠标悬停在其他部分上.class元素将不触发a

的悬停样式

.class2:hover a {}

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

工作小提琴here。

Answer 3

是。有区别。

从行为上看，似乎不一样，但如果您在nrow(df)标记周围添加了一个边距，您可能会发现第一个选择器（name='SampleID'）将停止工作。

Answer 4

当.class:hover a的任何部分悬停在a上时，

class选择.class a:hover链接，a仅在a链接时选择_.sortBy(myObj, "key")链接链接徘徊在

Answer 5

在class2：hover中，你在类中嵌套的所有元素下激活CSS类。这包括您是否要在链接边框外添加填充。

在class2 a：hover中，只有当你专门悬停在链接上时才会激活CSS类。否则，该类将被忽略。

希望这有帮助！

.class a：hover vs .class：hover a

5 个答案: