jquery - 如何处理这个 CSS 鼠标悬停问题？

Question

我有以下 HTML 结构？

<div id="content">

    <h3>some text</h3> <!--Another element having <h3> markup-->

    <div class="abc"> <!--This DIV does not have any id-->
        <div/>
        <h3>some text</h3>
    </div>
</div>

及以下CSS代码

#content h3:hover, #content .abc:hover
{
    background-color:#F0F0F0;
    background-image:url('/images/flag.gif');
    background-repeat:no-repeat;
    background-position:left center;
}

我面临的问题:

当我将鼠标悬停在<h3>时下<div id="content">然后它按照我的预期应用CSS。但是当我将鼠标悬停到<div class="abc">时然后它对 <div class="abc"> 应用 CSS以及 <h3> <div class="abc">下的元素。所以它在鼠标悬停时显示两个图像。

我可以控制这种行为吗？

意味着当我将鼠标悬停到 <h3> 时的<div class="abc">那么它应该只显示一张背景图像而不是两次？

我怎样才能实现这个目标？仅使用 CSS 还是必须使用 jQuery？

Answer 1

试试这个:

#content > h3:hover, #myOutput > .abc:hover

Here's a codepen.

您的代码使用后代选择器(只是一个空格)，因此您告诉浏览器将悬停样式应用到作为 #content 后代的任何 h3 元素，其中包括两个 h3 元素。我此处的代码使用子组合器选择器 (>)，它仅指定作为指定父级的直接后代的元素。

感到困惑吗？ Read this.