1

我有以下 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">

我可以控制这种行为吗？

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

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

4

3 回答 3

3

尝试这个：

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

这是一个代码笔。

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

使困惑？读这个。

于 2013-10-29T06:27:46.880 回答
2

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

问题是第二个<h3>也是一个孩子，#content所以规则也适用于它。通过使用>，您只选择<h3>哪个是#content.

于 2013-10-29T06:29:04.700 回答
0

将您的 html 更改为“

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

"

于 2013-10-29T07:16:59.980 回答