javascript - 将鼠标悬停在元素 B 上时更改元素 A 的背景 - mouseleave 不起作用

Question

我试图在将鼠标悬停在元素 B 上时更改元素 A 的背景，并在鼠标离开时将其更改回来。 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');
});
});