blocks|key|1647567|text|我的理解是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1647568|当.class2+a:hover标记悬停时，a将针对.class2元素中的任何超链接标记。|offset|length|style|CODE|1647569|当.class2:hover+a被悬停时，a将针对.class2元素中的任何超链接a标记。|1647570|区别在于您在哪些元素上悬停以更改样式规则。|1647571|示例：|1647572|​|1647573|.box{
++background:+red;
++width:+50px;
++height:+50px;
++margin-bottom:+10px;
}
.case1+a:hover+{
++background:+blue;
}++

.case2:hover+a+{
+++background:+green;
}|code-block|syntax|javascript|1647574|<html>
++<body>
++++<div+class="box+case1"><a+href="#">case+1</a></div>
++++<div+class="box+case2"><a+href="#">case+2</a></div>
++</body>
</html>|1647575|1647576|在这种情况下，您想要悬停.class2元素还是a？|1647577|entityMap^0|0|1|F|M|1|Q|7|0|1|F|L|1|P|7|15|1|0|0|0|0|0|0|0|C|7|N|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@$D|13|E|14|F|G]|$D|15|E|16|F|G]|$D|17|E|18|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|19|8|@$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]|$D|1G|E|1H|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1I|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1J|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1K|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1L|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|R|7|1M|8|@]|9|@]|A|$S|T]]|$1|W|3|O|5|6|7|1N|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1O|8|@$D|1P|E|1Q|F|G]|$D|1R|E|1S|F|G]]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]]|10|$]]

My understanding is this:

<code>.class2 a:hover</code> will target any hyperlink tags within <code>.class2</code> elements when the <code>a</code> tags are hovered.

<code>.class2:hover a</code> will target any hyperlink <code>a</code> tags within <code>.class2</code> elements when <code>.class2</code> is hovered.

The distinction is which element you hover in order to change those styling rules. 

Example:

<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.box{
 background: red;
 width: 50px;
 height: 50px;
 margin-bottom: 10px;
}
.case1 a:hover {
 background: blue;
} 

.case2:hover a {
 background: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
 &lt;body&gt;
 &lt;div class="box case1"&gt;&lt;a href="#"&gt;case 1&lt;/a&gt;&lt;/div&gt;
 &lt;div class="box case2"&gt;&lt;a href="#"&gt;case 2&lt;/a&gt;&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>


In this case, do you want to hover the <code>.class2</code> element or the <code>a</code>?

blocks|key|1647679|text|.class2+a:hover+{}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1647680|有了以上所述，只有当特定地悬停a元素时，样式才会应用于a，如果.class元素有填充或其他内容，则悬停在.class元素的其他部分上将而不是触发a的悬停样式。|unstyled|offset|length|style|CODE|BOLD|1647681|.class2:hover+a+{}|1647682|如果a元素的任何部分悬停(填充、内容等)，则上述内容将触发.class2的悬停样式。|1647683|工作小提琴这里。|1647684|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/kiirosora/0jx0t90s/2/^0|0|F|1|R|1|V|6|1G|6|20|1|1V|3|0|0|2|1|T|7|0|5|2|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|10|8|@$G|11|H|12|I|J]|$G|13|H|14|I|J]|$G|15|H|16|I|J]|$G|17|H|18|I|J]|$G|19|H|1A|I|J]|$G|1B|H|1C|I|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1D|8|@]|9|@]|A|$B|C]]|$1|N|3|O|5|F|7|1E|8|@$G|1F|H|1G|I|J]|$G|1H|H|1I|I|J]]|9|@]|A|$]]|$1|P|3|Q|5|F|7|1J|8|@]|9|@$G|1K|H|1L|1|1M]]|A|$]]|$1|R|3|-4|5|F|7|1N|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<pre><code>.class2 a:hover {}
</code></pre>

With the above, the style would only apply to <code>a</code> when the <code>a</code> element is hovered specifically, if the <code>.class</code> element has padding or other content, hovering over the other parts of the <code>.class</code> element will not trigger the hovered style for <code>a</code>

<hr>

<pre><code>.class2:hover a {}
</code></pre>

While the above will trigger the hover style for <code>a</code> if any part of the <code>.class2</code> element is hovered (padding, content, etc..)

Working fiddle <a href="https://jsfiddle.net/kiirosora/0jx0t90s/2/" rel="nofollow">here</a>.

blocks|key|492303|text|是。是有区别的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|492304|从行为上看，这似乎没有什么区别，但如果在<a>标记周围添加一个空白，您可能会发现第一个选择器(.class2+a:hover+{})将停止缩进工作。|offset|length|style|CODE|492305|entityMap^0|0|K|3|1B|I|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

Yes. There is a difference.

Behaviorally, there may not seem like a difference, but if you add a margin around your <code>&lt;a&gt;</code> tag, you might find that your first selector (<code>.class2 a:hover {}</code>) will stop working as indended.

blocks|key|492451|text|当.class:hover+a的任何部分悬停在class上时，.class+a:hover选择a链接，而.class+a:hover只在a链接悬停时选择a链接|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|492452|entityMap^0|1|E|N|5|V|E|1B|1|1G|E|1W|1|24|1|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|G|$]]

<code>.class:hover a</code> selects the <code>a</code> link when any part of the <code>class</code> is hovered upon while <code>.class a:hover</code> selects the <code>a</code> link only when the <code>a</code> link is hovered upon

blocks|key|429956|text|在“悬停”中，您将激活嵌套在类中的所有元素下的CSS类。这包括如果您想在链接的边框之外添加填充内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|429957|在CSS+a:+class2中，只有当您在链接上悬停时才激活CSS类。否则，类将被忽略。|429958|希望这能有所帮助！|429959|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

In class2:hover, you're activating the CSS class under all elements nested in the class. This includes if you wanted to add padding outside the border of your links. 

In class2 a:hover, the CSS class is only activated when you're hovering specifically over the link. Otherwise, the class is ignored.

Hope this helps!

Couldn't find an answer to something I've been wondering about.

Is there a difference between <code>.class2 a:hover {}</code> and <code>.class2:hover a {}</code>? Or a preference for one over the other?

I've been using <code>.class2 a:hover {}</code> to alter anchors on anchor hover (ie: anchor text color), but when I wanted to alter the div that held the anchor as well (ie: anchor color and div background-color both change on hover), I had to use <code>.class2:hover a {}</code> for it to work. In doing so, I got confused as to the difference because between the two as they are written so similarly.

Thanks!

EDIT 
Edited the question to be more clear. Thanks for untwisting my brain :)

.class a:hover vs .class:hover a

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

对我一直在想的事情找不到答案。.class2 a:hover {}和.class2:hover a {}之间有什么区别吗？还是偏爱一个而不是另一个？我一直在使用.class2 a:hover {}来改变锚悬停上的锚(即锚文本颜色)，但是当我也想改变保持锚的div (即锚颜色和div背景颜色都会在悬停上改变)时，我必须使用.class2:hover a {}才能工作。在这样做的过程中，我对两者之间的

问.class a:悬停对.class:hover a
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问.class a:悬停对.class:hover aEN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问.class a:悬停对.class:hover a
EN