在div2 mousover上突出显示div1和div2，在div1 mouseover上不突出显示任何内容
[英]highlight div1 and div2 on div2 mousover, highlight nothing on div1 mouseover
问题描述
Div highlighting question 
Div强调问题
I have 2 divs stacked on top of each other inside a container. 我在容器内有两个堆叠在一起的div。 Here is the behavior I want: when you mouseover the top div, nothing happens. 这是我想要的行为：当你将鼠标移到顶部div时，没有任何反应。 when you mouse over the bottom div, the top div background changes color, and the bottom div's background changes a different color. 当鼠标悬停在底部div上时，顶部div背景会改变颜色，而底部div的背景会改变不同的颜色。 In the sample code I tried, mousing over the container div makes the top turn green and the bottom turn vlueviolet. 在我尝试的示例代码中，将鼠标悬停在容器div上使顶部转为绿色，底部转为vlueviolet。 I want a mouseover on the bottom to cause this behavior, but I want a mouseover on the top to do nothing. 我想在底部使用鼠标悬停导致此行为，但我希望鼠标悬停在顶部不做任何事情。 I feel like I could get this done in jQuery using a parent selector or something, but it seems like I should be able to do this in pure CSS. 我觉得我可以使用父选择器或其他东西在jQuery中完成这个，但看起来我应该能够在纯CSS中做到这一点。 Thanks! 谢谢！
Here is what I've tried, which of course doesn't work, but gives an idea of what I'm trying to do. 这是我尝试过的，当然这不起作用，但是让我知道我正在尝试做什么。
<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>
top
</div>
<br>
<div id=bottom>
bottom
</div>
</div>
</body>
</html>
3 个解决方案
解决方案1
1 2013-08-01 14:44:15
解决方案2
1 已采纳 2013-08-01 14:57:17
I changed up your CSS a little bit. 我稍微改变了你的CSS。 Basically to make it bigger. 基本上是为了让它更大。
The order is important here. 订单在这里很重要。
This is not perfect due to the outer div's border. 由于外部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>
解决方案3
0 2013-08-01 14:52:47
I don't think you can do this... CSS selection only works one way, from parent to child or in cascade.... so you can only change the CSS of divs below another div. 我不认为你可以这样做... CSS选择只能以一种方式工作，从父级到子级或级联....所以你只能在另一个div下面改变div的CSS。
For example look this jsFiddle : as you can see, only the bottom divs' style can change. 例如，看看这个jsFiddle ：正如你所看到的，只有底部div的风格可以改变。
This code 这段代码
div#fourth:hover ~ #first{
background:green;
}
doesn't work because the "first" div is above the "fourth" div... 不起作用，因为“第一”div高于“第四”div ...
Anyway, if you want to set the background of top div to white, you will see a rollover with the delay. 无论如何，如果你想将顶部div的背景设置为白色，你会看到延迟翻转。
PS: Sorry for my bad English. PS：抱歉我的英语不好。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.