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

【问题标题】：changing the background of element A when hovering over element B - mouseleave not working将鼠标悬停在元素 B 上时更改元素 A 的背景 - mouseleave 不起作用
【发布时间】：2017-04-23 17:07:04
【问题描述】：

我试图在将鼠标悬停在元素 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');
});
});

我做错了什么？提前致谢。

【问题讨论】：

$('.B').mouseleave(function(){ $('.A').css('background', 'blue'); 你忘了前面的“.” B

标签： javascript jquery html css

【解决方案1】：

你没有添加.B

试试这个：

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

【讨论】：

天哪，我真傻！我重复了好几次，完全没有看到我忘记了这个点。谢谢！！！

【解决方案2】：

如果你使用 jQuery，有一个更优雅的解决方案。

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

【讨论】：