高亮DIV1和DIV2上mousover DIV2，突出显示DIV1鼠标悬停

股利没什么问题突出高亮DIV1和DIV2上mousover DIV2，突出显示DIV1鼠标悬停

我有2周的div堆叠在一个容器内彼此的顶部上。以下是我想要的行为：当您将鼠标悬停在顶部div上时，没有任何反应。当您在底部div上使用鼠标时，顶部div背景会更改颜色，底部div的背景会更改不同的颜色。在我尝试的示例代码中，鼠标移动到容器div上使变成绿色，底部变成紫色。我想要一个鼠标悬停在底部，导致这种行为，但我想在顶部的一个鼠标悬停无所事事。我觉得我可以得到这个在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>

来源

2013-08-01 chiliNUT

我改变了你的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-01 14:57:17

这是完美的，谢谢！ – chiliNUT

是this你在找什么？

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

另外，您还可以使用!important：

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

来源

2013-08-01 14:44:15 kalley

这不会做我想做的，鼠标放在上面停留白色的，但它仍然使底部蓝紫，保罗·格里姆斯的解决方案保持顶部和底部白色的，当你将鼠标放置在上面。 – chiliNUT

我不认为你可以做到这一点... CSS选择只能单向的，从父到子或级联.. ..所以你只能改变另一个div下面的div的CSS。

例如外观this jsFiddle：如您所见，只有底部div的样式可以更改。

此代码

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

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

无论如何，如果你想设置顶部的div的背景白色，你会看到延迟的延期。

PS：抱歉我的英文不好。

来源

2013-08-01 14:52:47 Alesanco

谢谢，我意识到关于CSS，所以我寻找的答案是Pual做的，聪明的事情让你仍然可以使用这些关系，孩子和级联。 – chiliNUT

高亮DIV1和DIV2上mousover DIV2，突出显示DIV1鼠标悬停

回答

相关问题