Question

Div突出显示问题

我在容器内有两个堆叠在一起的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>

Answer 1

this您要找的是什么？

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

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

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

Answer 2

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

这里的订单很重要。

由于外边界的边界，这并不完美。

<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>

Answer 3

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

例如，查看this jsFiddle：正如您所看到的，只有底部div的样式可以更改。

此代码

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

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

无论如何，如果你想将top div的背景设置为白色，你会看到延迟翻转。

PS：抱歉我的英语不好。

在div 2 mouseover上突出显示div1和div2，在div1 mouseover上不突出显示任何内容

3 个答案: