Question

I have a div element and a I want to fire a function when mouse enters it.
But it is really in the center of the page so mouse is usually on it on page load and function runs.
Is there a way to make it so my function doesn’t run when mouse is already in but when enter?

<div id = "mouse-control-div">.....</div>
<script type="text/javascript">
     $('#mouse-control-div').mouseover(function() {alert('some thing');});
</script>

I also tried .mouseenter but the same result.

(code sample is added)

Answer 1

What if you have a boolean that tells you if you already have entered?

For information about the jQuery Events: MouseOver / MouseOut vs. MouseEnter / MouseLeave look here

// When the DOM is ready, init scripts.
jQuery(function( $ ){
    var isEntered = false;
    // Bind the mouse over /out to the first DIV.
    $( "#mouse-control-div" ).bind(
        "mouseover mouseout",
        function( event ){
            if(!isEntered)
            {
                isEntered = true;
                echo('entered');
            }
        }
    );

    // Bind the mouse enter to the second DIV.
    $( "#mouse-control-div" ).bind(
        "mouseenter mouseleave",
        function( event ){
            if(isEntered)
            {
                isEntered = false;
                echo('left');
            }
        }
    );

    function echo(string)
    {
        $('#output').append('<li>'+string+'</li>');
    }

});

​

For the working demo look here