将鼠标悬停在 Div 上并更改另一个，不起作用吗？

Question

我有一个div，我想做的是，当你把鼠标悬停在div 1上时，它会改变div 2。

所以我可以用.div1:hover .div2做CSS，这意味着当我悬停在1上时，2会改变。

我以前使用过这个，甚至在同一个样式表上也使用过，但由于某种原因，它不起作用。

这就是CSS。

#slide {
width:220%;
height:300px;
text-align:center;
position:relative;
top:0px;
left:0px;
-webkit-transition: left 2s linear;
-moz-transition: left 2s linear;
-ms-transition: left 2s linear;
-o-transition: left 2s linear;
transition: left 2s linear;
}
.six {
position:relative;
top:0px;
left:0px;
background-color:#F00;
}
.six:hover #slide {
left:-100%;
}

所以这在我看来很好，而且它在同一个样式表上工作，但有什么东西阻止了它？

任何想法都很棒。

Answer 1

.div1:hover .div2选择器指的是"div2类的元素，该元素是悬停在其上的div1类元素的子元素"，因此只有当div2是div1的子元素时，它才会工作。

如果您需要div2与div1无关，那么您只能使用JavaScript来实现这一点。类似这样的东西（使用jQuery库）：

$('.div1').hover(function() {
    $('.div2').addClass('div1-hovered-on');
}, function() {
    $('.div2').removeClass('div1-hovered-on');
});