Home/ Questions/Q 7042149
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:08:00+00:00

The code below moves a div to the correct height upon mouseenter of another

  • 0

The code below moves a div to the correct height upon mouseenter of another element (which I will refer to as ‘container’ from now on), then as the mouse moves it adjusts the left position of the element so that it follows the mouse left and right.

Finally when the mouse leaves the container div, the element is hidden.

$('body').on('mouseenter mouseleave mousemove', '.seek-bar', function (e) {
    var $seeker = $('#seek-head');

    if (e.type == 'mouseenter') {
        var top = Number($(this).offset().top);
        $seeker.css({ top: top + 'px' }).show();
    }
    else if (e.type == 'mouseleave') {
        $seeker.hide();
    }

    if (e.type == 'mousemove') {
        var x = e.pageX;
        $seeker.css({ left: x + 'px' });
    }
});

Although this works fine, the element flashes due to the mouse being over $seeker rather than the container element. The mouseleave event is being fired when I don’t wan’t it to be.

How can I prevent this?

Please Note: The $seeker element is directly in the <body> so will always be ‘in front’ of the container element.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Rewrote you code a litte, but why don’t you put the mouseleave on the element that is infront of the container element?

    var $seeker = $('#seek-head');    
$('body').on({
    mouseenter: function() {
        var top = Number($(this).offset().top);
        $seeker.css({ top: top + 'px' }).show();
    },
    mousemove: function() {
        var x = e.pageX;
        $seeker.css({ left: x + 'px' });
    }
}, '.seek-bar');

$('body').on('mouseleave', $seeker, function() {
    $seeker.hide();
});
    • 0