0

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

我很确定这是可以做到的，我隐约记得不久前读过它，但我无法再次找到链接，我之前的搜索也没有帮助，可能是因为我可能没有使用正确的术语。

这是代码：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 上时，如何让其他两个div 改变颜色？

4

2 回答 2

5

你的意思是这样吗？

小提琴

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

问题是这>意味着它是直接后代选择器，并且选择器的组合+不起作用。

于 2013-05-21T01:49:13.060 回答
2

你有两件事要知道。

首先，您不能在一个“规则”中通过 id 选择 2 个元素，您需要使用逗号。

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

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

您的规则应如下所示：

#one:hover ~ #two, #one:hover ~ #three { background-color: yellow; }
于 2013-05-21T01:50:17.397 回答