How to avoid mass shelling onmouseover onmouseout?

Question

I have a table with multiple columns. Each of them has an image in which it has an onmouseover / onmouseout event, which shows the message in a div and hides the message.

My problem is that after the user quickly moves from left to right on top of a large number of images, all mouse and mouse events that look silly are executed ...

Is it possible to reorder the internal event stack to avoid this, so that the user only executes the current event (basically the first), and then the last, if it is not the same type?

For example, if the overlay over the first image is performed, and the position of the mouse move stops over the image three times next to the first. I can avoid all other events, because the mouse stopped above the image, and the mouse is similar to the one where I stopped with the mouse.

How can I avoid this multiple run?

Answer 1

You need to check out the hoverIntent plugin that solves this problem.

Answer 2

. mouseover, _mouseOn true ( false mouseout), oneTime, , , 500 .. _mouseOn

    function Hover() {
  _mouseOn = true;
  $(document).oneTime(500, "500ms", functionToCheckTheMouseOnAndDisplayTheImage);
};

Answer 3

//Global timeout handle for mouseover and mouseout
var timeoutHandle;

$(document).ready(function() {

    BindMouseHover($(".helptext")); 

});//closing ready

//bind mouseover and mouseout actions on all elements 
function BindMouseHover(elements) {            
    $(elements).hover(
        function() {
            timeoutHandle = setTimeout('HandleMouseHover(true)', 1000);
        },
        function() {
            HandleMouseHover(false);
        }
    );
}

//Handle Mouseover and mouseout events
function HandleMouseHover(bDelay) {
    if (bDelay) {                
        $(".tooltip").show();
    }
    else {
        $(".tooltip").hide();
        clearTimeout(timeoutHandle);
    }
}

: DelayedTooltip (*** true *) ** 1000 setTimeout timeoutHandle

mouseout 1000 , clearTimeout (*** timeoutHandle *) **, setTimeout

, , .

, JavaScript.

Answer 4

. , , - , , -, . , - , , - , ( , ). . , , , .

Answer 5

, ( http://bavotasan.com/demos/fadehover/, )

<script> 
$(document).ready(function(){
    $(".a").hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
    });

});
</script>