要素Bの上にマウスを乗せたときに要素Aの背景を変更する - マウスが動かない

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