{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 神经病院院长 的问题《highlight div1 and div2 on div2 mousover, highligh》','https://www.manongdao.com/q-433137.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
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.
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
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.
Is this what you're looking for?
Alternatively, you could also use
!important: