将鼠标悬停在一个元素上以更改另一个元素的样式时，我有一个错误

Question

这是我的jsfiddle： http://jsfiddle.net/greyshark7/9kwAZ/

我有两个div，表示为红色框和绿色框。我编写代码，以便当红色框悬停时，绿色div变大，反之亦然。

/*make red box bigger when user hovers over green box*/
.greenbox:hover + .redbox{
    width:200px;
}

/*make green box bigger when user hovers over red box*/
.redbox:hover + .greenbox{
    width:200px;
}

然而，只有当我将鼠标悬停在红色框上时，它才有效。当我将鼠标悬停在绿色框上时，没有任何反应。

我不明白为什么它不起作用，特别是因为我实际上复制了工作代码并简单地将“红色”改为“绿色”，反之亦然。

Answer 1

这是因为+选择器选择紧接在第一个元素之后的所有元素。第二个选择器不起作用，因为.redbox之后没有.greenbox元素。