I am experiencing an issue with centering the background image below a link. When using mouseleave, the image does not return exactly to the center of the list. Any assistance on how to resolve this would be greatly appreciated. Thank you!
Here is the reference JsFiddle: JsFiddle
I am creating a simple menu within a list that utilizes animation to follow the cursor onmouseover and return to its original position on mouseleave.
Upon loading the page, I want the image to always appear below the current position. How can I achieve this in a div with margin 0 auto? Example of desired effect can be found here.
/*jQuery*/
$('li').mouseover( function() {
var top = $(this).offset().top + $(this).height() + 5;
var left = $(this).offset().left + ($(this).width() / 2);
$('#marker').stop().animate( { top: top, left: left }, 200 );
});
$('li').mouseleave( function() {
});
I hope the explanation provided is clear enough for you to assist me with resolving this issue!