CSS3懸停在嵌套divs

Question

我有mutlilevel嵌套divs。每個div都有一個跨度。

<div> 
    <span>AA</span> 
    <div> 
     <span>BB</span> 
     <div> 
      <span>CC</span> 
     </div> 
    </div> 
</div> 

如果我把鼠標懸停在一個div上，跨度CSS應該會得到另一個背景。這工作得很好，只要我懸停最外面的div，包含AA跨度。 但問題是，如果我徘徊中間的div，包含BB跨度，外部div也懸停。如果我徘徊CC跨度div所有三個跨度獲得背景。

我想要的是，只有鼠標指向的一個div被徘徊。 我認爲最好是CSS解決方案，但jQUery也會很棒。

這是問題的一個簡化的jsfiddle：http://jsfiddle.net/FufRg/

Answer 1

這樣想。如果你進入房屋，而不是進入房間，而不是進入房間，那麼你仍然在房子裏 - >在房間裏 - >在牀上。你不能說你只在牀上，或只在房間裏。我想你明白我的觀點。如果您將鼠標懸停在CCdiv上，將在所有div上觸發hover，因爲您已經在AAdiv和bbdiv之上。最好的解決方案是使用單獨的div，而不是嵌套。像阿奎羅說。

Answer 2

我已經創建了一個例子，它適用於我。我已經加入jQuery和jQuery UI的背景動畫：

HTML：

<div class="a"> 
    <span>AA</span> 
    <div class="b"> 
    <span>BB</span> 
    <div class="c"> 
     <span>CC</span> 
    </div> 
</div> 

CSS：

<style> 

    .a{width: 400px; 
     height: 400px; 
     background: #000;} 

    .b{width: 300px; 
     height: 300px; 
     background: #ddd;} 

    .c{width: 200px; 
     height: 200px; 
     background: #efefee;} 

</style> 

的jQuery：

<script> 
$(document).ready(function(){ 


$('.a').hover(function(){ 

    $(this).find('*').animate({'backgroundColor': 'red'},400); 

}); 

$('.b').hover(function(){ 

    $(this).find('*').animate({'backgroundColor': 'blue'},400); 

}); 

$('.c').hover(function(){ 

    $(this).find('*').animate({'backgroundColor': 'yellow'},400); 

}); 

}); 
</script> 

Answer 3

在jQuery中，這是簡單。只是停止傳播。 jsFiddle

$("div").on("mouseover",function(e){ 
    $(this).children("span").css("background","#AAA"); 
    e.stopPropagation(); 
}); 
$("div").on("mouseout",function(){ 
    $(this).children("span").css("background",""); 
});