Question

当我将鼠标悬停在元素B上并在鼠标移动时将其更改回来时，我试图更改元素A的背景。 B是A的后代。小鼠中心部分似乎工作正常（悬停时背景颜色会发生变化），但是鼠标距离不起作用 - 背景保持不变。

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');
});

将鼠标悬停在元素B上时更改元素A的背景 - mouseleave无法正常工作

2 个答案: