當鼠標懸停在元素B上時改變元素A的背景 - mouseleave不起作用

Question

我試圖改變元素B的背景，並將鼠標移到元素B上並將其改回。 B是A的後代。mouseenter部分似乎工作正常（懸停時背景顏色發生變化），但是mouseleave不起作用 - 背景保持不變。

的HTML：

<div class="A" style="height: 500px; background:blue"> 
    <div class="B" style="height:400px; width:100px"><img src="someimg.jpg" style="height:400px"></div> 
    </div> 

jQuery的：

$(document).ready(function(){ 
$('.B').mouseenter(function(){ 
$('.A').css('background', 'black'); 
}); 
$('B').mouseleave(function(){ 
    $('.A').css('background', 'blue'); 
}); 
}); 

我在做什麼錯？提前致謝。

Answer 1

您沒有添加.B

試試這個：

$(document).ready(function(){ 
$('.B').mouseenter(function(){ 
$('.A').css('background', 'black'); 
}); 
$('.B').mouseleave(function(){ 
    $('.A').css('background', 'blue'); 
}); 
}); 

Answer 2

如果您正在使用jQuery，還有一個更優雅的解決方案。

$('.B').hover(function() { 
    $('.A').css('background', 'black'); 
}, function() { 
    $('.A').css('background', 'blue'); 
});