0

Div highlighting question

I have 2 divs stacked on top of each other inside a container. Here is the behavior I want: when you mouseover the top div, nothing happens. when you mouse over the bottom div, the top div background changes color, and the bottom div's background changes a different color. In the sample code I tried, mousing over the container div makes the top turn green and the bottom turn 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. 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>
&nbsp; &nbsp;top
</div>
<br>
<div id=bottom>
bottom
</div>
</div>
</body>
</html>
4

3 回答 3

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>
于 2013-08-01T14:57:17.793 回答
1

这是你要找的吗？

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

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

div#top:hover {
    background: white !important;
}
于 2013-08-01T14:44:15.303 回答
0

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

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

这段代码

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

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

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

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

于 2013-08-01T14:52:47.617 回答