在 div2 鼠标悬停时突出显示 div1 和 div2，在 div1 鼠标悬停时不突出显示答案

【问题标题】：highlight div1 and div2 on div2 mousover, highlight nothing on div1 mouseover在 div2 鼠标悬停时突出显示 div1 和 div2，在 div1 鼠标悬停时不突出显示
【发布时间】：2013-08-01 14:29:59
【问题描述】：

Div 高亮问题

我在一个容器内有 2 个 div 堆叠在一起。这是我想要的行为：当您将鼠标悬停在顶部 div 上时，什么也没有发生。当你鼠标在底部 div 上，顶部 div 背景改变颜色，底部 div 的背景改变不同的颜色。在我尝试的示例代码中，将鼠标悬停在容器 div 上顶部变成绿色，底部变成蓝色。我希望鼠标悬停在底部导致这种行为，但我希望鼠标悬停在顶部什么都不做。我觉得我可以得到这个使用父选择器或其他东西在jQuery中完成，但似乎我应该能够在纯 CSS 中执行此操作。谢谢！

这是我尝试过的方法，当然这不起作用，但可以让我知道我正在尝试做什么。

<html>
<head>
<style>
div
{
display:inline;
border:1px dotted black;
font-family:Courier;
background:white;
}
div#outer{
display:inline-block;
border:2px solid red;
}
div#outer:hover #top{
background:green;
}
div#outer:hover #bottom{
background:blueviolet;
}
div#top:hover, div#bottom:hover{
background:white;
}
</style>
</head>
<body>
<div id=outer>
<div id=top>
&nbsp; &nbsp;top
</div>
<br>
<div id=bottom>
bottom
</div>
</div>
</body>
</html>

【问题讨论】：

标签： css html parent mouseover highlighting

【解决方案1】：

我稍微修改了你的 CSS。基本上是为了让它更大。

这里的顺序很重要。

由于外部 div 的边框，这并不完美。

<style>
div {
    border:1px dotted black;
    font-family:Courier;
    background:white;
}

div#top, div#bottom {
    height: 200px;
    width: 200px;
}

div#outer:hover #bottom:hover {
    background:blueviolet;
}

div#outer:hover #top {
    background:green;
}

div#outer #top:hover{
    background:white;
}

div#outer{
    display:inline-block;
    border:2px solid red;
}
</style>

【讨论】：

【解决方案2】：

this 是你要找的吗？

div#outer:hover div#top:hover, div#bottom:hover{
    background:white;
}

或者，您也可以使用!important：

div#top:hover {
    background: white !important;
}

【讨论】：

这不符合我的要求，鼠标悬停在顶部保持白色，但它仍然使底部呈蓝紫色，当您将鼠标悬停在顶部时，Paul Grimes 的解决方案使顶部和底部都保持白色。

【解决方案3】：

我不认为你能做到这一点...... CSS 选择只能以一种方式工作，从父级到子级或级联......所以你只能更改另一个 div 下面的 div 的 CSS。

例如看this jsFiddle: 如你所见，只有底部div的样式可以改变。

这段代码

div#fourth:hover ~ #first{
    background:green;
}

不起作用，因为“第一个”div 高于“第四个”div...

无论如何，如果你想将顶部 div 的背景设置为白色，你会看到一个带有延迟的翻转。

PS：对不起，我的英语不好。

【讨论】：

谢谢，关于 CSS，我意识到这一点，所以我正在寻找的答案是 Pual 所做的，它很聪明，可以让您仍然使用这些关系、子关系和级联关系。