Question

I know the mouseenter is coded such that it propagates mouseover to all the elements within the DOM that it is bound to.

So, like the question states, is there a way to manually apply this propagation to other elements that are separate from the DOM, which I bound the mouseenter event to.

The function, $.stopPropagation(), stops the propagation but is there an applyPropagationTo like function?

Here is the scenario:

Say I have a div, class=divCON. I have a absolute positioned div appended to the body, called divHOV, which is hid. When I mouseenter divCON, divHOV becomes visible and follows my mouse when I am within divCON.

I want it so that when my mouse is moving within divCON, the mouse tends to enter divHOV if the browser is slow to reposition the divHOV while moving the mouse. I want it so that I can propagate divHOV’s mouseenter onto divCON so that a mouseleave event is not trigger when I go on divHOV.

jsFiddle: http://jsfiddle.net/vuxcR/

Note how when the mouse enters divHOV, it mouseleaves the divCON. I want it so that when it does not mouseleave divCON when I enter divHOV.

Answer 1

Fiddle: http://jsfiddle.net/vuxcR/1/

Here’s the desired code. See the comments and bottom for explanation:

$(document).ready(function() {
    var $divCON = $(".divCON");
    $divCON.bind("mouseenter", function() {

        //Cancel if this function has already run (so, if the next element
        //  has class divHOV
        if($(this).next().hasClass('divHOV')) return;
        $divHOV = $("<div class='divHOV'></div>");
        $divHOV.mousemove(function(ev){
            var offset = $divCON.offset();

            var height = $divCON.height();
            var width = $divCON.width();

            var left = offset.left;
            var top = offset.top;

            var bottom = top + height;
            var right = left + width;

            // If the mouse coordinates are within the box
            if(ev.pageX >= left && ev.pageX <= right &&
               ev.pageY >= top && ev.pageY <= bottom){

                //Trigger move.
                $divHOV.css({'top': ev.pageY - 3 + 'px', 'left': ev.pageX + 3 + 'px'});
            }
        });
        $(this).after($divHOV);
    });
    $divCON.bind("mousemove",function(e) {
        $(".divHOV").css({'top': e.pageY - 3 + 'px', 'left': e.pageX + 3 + 'px'});
    });
});

When the user enters .divCON for the first time, .divHOV is added. When moving the mouse (see bottom), divHOV is positioned again. Once the mouse enters .divHOV, the coordinates are calculated again IF the mouse is within the box of divCON.

When the mouse enters .divCON again, the function immediately returns, because .divHOV already exists: if($(this).next().hasClass('divHOV')) return;.