highlight div1 and div2 on div2 mousover, highlight nothing on div1 mouseover

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>

I changed up your CSS a little bit. Basically to make it bigger.

The order is important here.

This is not perfect due to the outer div's border.

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

Is this what you're looking for?

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

Alternatively, you could also use !important:

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

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.

For example look this jsFiddle: as you can see, only the bottom divs' style can change.

This code

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

doesn't work because the "first" div is above the "fourth" div...

Anyway, if you want to set the background of top div to white, you will see a rollover with the delay.

PS: Sorry for my bad English.

来源：https://stackoverflow.com/questions/17996908/highlight-div1-and-div2-on-div2-mousover-highlight-nothing-on-div1-mouseover

标签

css

html

parent

mouseover

highlighting