div嵌套懸停問題

我有3個HTML DIV這樣的：div嵌套懸停問題

<div id="MainDiv"> 
    <div id="nesteddiv1"></div> 
    <div id="nesteddiv2"></div> 
</div>

我想，當我將鼠標懸停在MainDiv或nestedDiv1，我設置的顏色1 MainDiv和顏色2 nesteddiv2，然後當我將鼠標懸停在nesteddiv2我改變nesteddiv2和MainDiv的背景顏色。

我更喜歡用CSS來做，我知道javascript的方式。

由於馬薩達克

來源

2010-12-20 Mazdak

沒有辦法，在CSS，使用選擇包括其後代之一爲目標的元素。因此，雖然上半場是微不足道的，但下半場是不可能的。

使用JavaScript，如果它很重要。

來源

2010-12-20 09:08:03 Quentin

對於給定的HTML你可以用下面的CSS

#MainDiv:hover{ 
    color:red; 
} 

#MainDiv div#nesteddiv1{ 
    color:gray; 
} 

#MainDiv div#nesteddiv1:hover{ 
    color:blue; 
} 

#MainDiv div#nesteddiv2{ 
    color:yellow; 
} 

#MainDiv div#nesteddiv2:hover{ 
    color:green; 
}

注：這不會在IE瀏覽器，因爲它僅支持在標籤上徘徊。

來源

2010-12-20 09:18:17

沒有辦法從另一個元素中選擇元素，這是不可能的。

但是你可以用jQuery做到這一點是這樣的：

$(function() { 
    $("#div1").hover(function() { 
     $("#show-hide").toggleClass('highlight'); 
    }); 
});

我做了一個example for you here。

來源

2010-12-20 09:18:44 Kyle

用CSS做這件事的唯一方法是在懸停發生時使用額外的div來覆蓋maindiv。而且它不會對IE < V9的工作，因爲它需要的z-index

這將是標記

<div id="MainDiv"> 
    <div id="nesteddiv1"></div> 
    <div id="nesteddiv2"> 
    <div id="extradiv"><div> 
    </div> 
</div>

的CSS將是非常棘手的。

（免責聲明：這沒有經過測試 - 也許你會需要更多的規則）

MainDiv必須是位置：相對或立場：絕對的，固定的寬度和高度，和z指數= -1。
嵌套div 1和2不能位置：相對或絕對，z-index = 1
額外div必須是：position：absolute，top：0，left：0，witdth和height相同如mainDiv，顯示：隱藏，和z索引= 0
＃nexteddiv2：懸停#extradiv將具有顯示：塊

z索引將使maindiv留永諾別人後面，而嵌套的div 1和2永遠留在上面。 extradiv會在它們之間，'覆蓋'maindiv，但只有當nesteddiv2被徘徊時。

該方法的一個缺點是extradiv在你停止懸停它之前是可見的，而不僅僅是nesteddiv2。

來源

2010-12-20 09:39:44 kikito

div嵌套懸停問題

回答

相關問題