gpt4 book ai didi

css - .class a :hover vs . class:hover a

转载 作者:行者123 更新时间:2023-12-05 08:43:17 31 4
gpt4 key购买 nike

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

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

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

谢谢!

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

最佳答案

我的理解是这样的:

.class2 a:hover 将在 a 标签悬停时定位 .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 上?

关于css - .class a :hover vs . class:hover a,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31396880/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com