Currently, I am attempting to modify the background of element A when mouseover event occurs on element B, and then revert it back to its original state upon mouseleave. It's worth noting that B is nested within A. Strangely, while the background color changes successfully during hover, it remains unchanged even after leaving the cursor from B.
The HTML structure is as follows:
<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>Here is the corresponding jQuery code:
$(document).ready(function(){
$('.B').mouseenter(function(){
$('.A').css('background', 'black');
});
$('B').mouseleave(function(){
$('.A').css('background', 'blue');
});
});I am seeking assistance in pinpointing any errors in my implementation. Any help would be greatly appreciated. Thank you in advance.