Question

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

尽管这一工程是细微的,但由于改写在<条码>上(>查询人上)而不是集装箱元素而引发元素。 <代码>mouseleave 事件发生时,我不会wan。

我如何防止这种情况?

注:<代码> 申请者部件直接载于<代码><and'gt;,因此永远放在集装箱内。

Answer 1

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

友情链接