在div2鼠标光标上突出显示div1和div2，在div1鼠标悬停时高亮显示 [英] highlight div1 and div2 on div2 mousover, highlight nothing on div1 mouseover
问题描述
Div突出显示问题
我有两个div在容器中彼此堆叠。
这是我想要的行为：当你鼠标悬停在顶部的div，没有任何反应。当鼠标
在底部div，顶部div背景更改颜色，底部div的背景
更改不同的颜色。在我尝试的示例代码中，鼠标悬停在容器div上，使
的顶部变成绿色，底部变成vlueviolet。我想要一个鼠标悬停在底部导致
这种行为，但我想要一个鼠标悬停在顶部做什么。我觉得我可以得到这个
在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>
这不是完美的，因为外面的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>
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.
<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>
这篇关于在div2鼠标光标上突出显示div1和div2，在div1鼠标悬停时高亮显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
