将另外两个div改变颜色，当悬停在主div [英] Making two other div's change color when hovering over main div

问题描述

我有3个div。当我将鼠标悬停在main/firstdiv上时，我想更改这些div中的一些。我真的，真的试图避免使用Javascript / jQuery，这里。

I have 3 div's. I would like to change some stuff in 2 of those div's when I hover over the "main"/"first" div. I am really, really trying to avoid any use of Javascript/jQuery, here.

我确定这可以做，我模糊请记住前一段时间看过，但我找不到链接，我以前的搜索没有帮助，可能是因为我可能不使用正确的术语。

I am pretty sure this can be done, I vaguely remember reading about it a while ago but I cannot find the link again and my previous searches have not helped, probably because I might not be using the correct terms.

这里是代码：
HTML：

Here's the code: HTML:

<div id=one></div>
<div id=two></div>
<div id=three></div>

CSS：

#one{background-color:blue;width:50px;height:50px;float:left;}
#two{background-color:green;width:50px;height:50px;float:left;}
#three{background-color:red;width:50px;height:50px;float:right;}

#one:hover > #two + #three { background-color: yellow; }

有人可以帮忙吗？

推荐答案

当我将鼠标悬停在第一个时，这是你的意思吗？

DO you mean like this?

#one:hover ~ #two , 
#one:hover ~ #three  
{ background-color: yellow; }

问题是> 是立即后代选择器，并且选择器与 + 的组合将无法工作。

Issue is that > mean it is immediate descendant selector and combination of selector with + won't work.

这篇关于将另外两个div改变颜色，当悬停在主div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！