懸停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並更換另一個，將無法正常工作？

回答

相關問題