Question

我有3个div。当我将鼠标悬停在“主要”/“第一”div上时，我想改变其中2个div中的一些东西。我真的，真的试图避免在这里使用Javascript / jQuery。

我很确定这可以做到，我依旧记得刚刚读过这篇文章，但是我再也找不到这个链接了，之前的搜索没有帮助，可能是因为我可能没有使用正确的术语。

这是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; }

有人可以帮忙吗？当我将鼠标悬停在第一个上时，如何让其他两个 div改变颜色？

Answer 1

你的意思是这样吗？

Fiddle

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

问题是>表示它是直接后代选择器，选择器与+的组合将无效。

Answer 2

您需要了解两件事。

首先，您无法在一个“规则”中按ID选择2个元素，您需要使用逗号。

其次，>意味着旁边和+的孩子。所以你的规则意味着：

#one
    #two //Children of #one
    #three //the selected one (children on #one)

您的规则应如下所示：

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

当鼠标悬停在主div上时，使另外两个div改变颜色

2 个答案:

Fiddle