懸停在其他標籤元素上

Question

當鼠標懸停在元素上時，我嘗試將鼠標懸停在其他標籤元素上。但它不起作用，當兩個元素都在相同的div標記中時，它正在工作。

HTML

<div id="wrap"> 
<div id="wrap1"> 
    <div class="a" id='aa'>AAAA</div> 
</div> 
<div id="wrap2"> 
    <div class ="b" id='bb'>BBBB</div> 
</div> 
</div> 

CSS

.a { 
    color: red; 
} 

.b { 
    color: orange; 
} 

#aa:hover ~ #bb { 
    background-color: blue; 
} 

* 注： *我不希望使用jQuery。

Answer 1

這不能在純CSS中完成，你將不得不寫一些JS。

我建議使用jQuery，因爲它使得這些操作非常簡單，例如，你的情況：

$('#aa').hover(
    function() { 
     $('#bb').css('background-color','blue') 
    }, 
    function() { 
     $('#bb').css('background-color','') 
    } 
) 

演示：http://jsfiddle.net/9nN6W/

有了同樣能在普通的香草JS來完成，以及再努力一點，但爲什麼發明輪子。

如果你想這樣做的純CSS，內容必須通過CSS accessable，例如，你可以針對「包裝」的DIV：

#wrap1:hover ~ #wrap2 { 
    background-color: blue; 
} 

演示：http://jsfiddle.net/9nN6W/1

通過流行的請求：純JS溶液

document.getElementById('aa').addEventListener('mouseenter', 
    function() { 
     document.getElementById('bb').style.backgroundColor = 'blue'; 
    } 
) 

document.getElementById('aa').addEventListener('mouseleave', 
    function() { 
     document.getElementById('bb').style.backgroundColor = ''; 
    } 
) 

演示3：http://jsfiddle.net/9nN6W/2/

Answer 2

的Javascript是那麼:-)

document.getElementById("aa").onmouseover=function(){ 
     document.getElementById("bb").style.backgroundColor="blue";  
    }; 
    document.getElementById("aa").onmouseout=function(){ 
     document.getElementById("bb").style.backgroundColor=""; 
    };