悬停Div并更换另一个，将无法正常工作？

我有一个div，我想发生什么事，就是当你悬停在1区它改变的div 2.悬停Div并更换另一个，将无法正常工作？

所以我能做到这一点是.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%; 
}

所以这对我来说看起来不错，它在同一个样式表上工作，但有些东西阻止了它？

任何想法都会很棒。

来源

2012-08-01 williamchanter

您的'div2'是否包含在'div1'中？ '.div1：hover .div2'转换为“影响div2类的元素，当元素被覆盖时，这些元素是类div1的子元素的子元素。” （另外，'.div1：hover> .div2'会将受影响的元素限制为'div1'元素的直接子元素。） – JAB 2012-08-01 17:57:57

您确实应该包含HTML，因此我们可以看到元素是相关的，如果有的话。 – KRyan 2012-08-01 17:59:06

的.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'); 
});

来源

2012-08-01 17:58:23 KRyan

感谢我所需要的，我确实意识到了有关子元素。谢谢。 – williamchanter 2012-08-02 11:54:39

悬停Div并更换另一个，将无法正常工作？

回答

相关问题