当鼠标悬停在元素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'); 
});