css - 将鼠标悬停在 Div 上并更改另一个，不行吗？

Question

我有一个 Div，我想要发生的事情是，当您将鼠标悬停在 div 1 上时，它会更改 div 2。

所以我可以用 CSS 来做到这一点，.div1:hover .div2这意味着当我将鼠标悬停在 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上的类的元素的子元素”，因此它仅在是.div1div2div1

如果您需要div2与 无关div1，那么您只能使用 JavaScript 执行此操作。像这样的东西（使用 jQuery 库）：

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