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">以及<h3>下的<div class="abc">元素应用CSS。所以它在鼠标悬停时显示两个图像。

我能控制这种行为吗？

表示当我将鼠标悬停在<h3>的{{1}}时，它应该只显示一张背景图片，而不是两次？

我怎样才能做到这一点？仅使用CSS还是必须使用jQuery？

Answer 1

试试这个：

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

Here's a codepen.

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

困惑？ Read this.

Answer 2

将#content h3:hover更改为#content > h3:hover。

问题是第二个<h3>也是#content的孩子，因此该规则也适用于此。使用>，您只需选择<h3>作为#content的直接子项。{/ p>

Answer 3

将您的HTML更改为 “

<h3>some text</h3> 
<div class="abc"> sdfdsf </div>
    <h3>some text</h3>

“

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

3 个答案:

如何处理这个C​​SS鼠标悬停问题？

3 个答案:

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