css - 将鼠标悬停在 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');
});