检测光标是否仍在元素中的问题

Question

当光标进入span元素时，我创建了一个赋值为1的变量，最终保留该值，直到光标离开该元素。

这样做的目的是检查用户是否仍然悬停在该元素上，因为我不知道绕过使用＆＃34;的简单方法：hover＆＃34;选择器。

问题是当我通过显示警告来检查是否悬停== 1时，当我清楚地输入元素并且没有留下它时，不会显示任何警告。

任何人都知道如何解决这个问题？

请参阅Bootply。

HTML：

<div class="navbar navbar-inverse navbar-fixed-top slideIn">
            <div class="container">             
                <div class="collapse navbar-collapse navHeaderCollapse">                    
                    <ul class="nav navbar-nav navbar-right">                            
                      <li><a href = "#"><span>ELEMENT</span></a></li>                       
                    </ul><!-- END: "nav navbar-nav navbar-right" -->
                </div><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
            </div><!-- END: "container" -->
        </div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->

JS：

var hovering=0;

$( "span" )
    .mouseover(function() {  
        hovering=1;
    })
    .mouseout(function() {
        hovering=0;   
    });
if (hovering==1) {
    alert("HOVERING");
}

编辑：我的目标主要是检查用户是否在向下滚动页面时仍悬停在元素上。这段代码起到了作用：

$( "span" )
    .mouseover(function() {  
        hovering=1;
    })
    .mouseout(function() {
        hovering=0;   
    });

var hovering =0;
(function() {        
    var timer;
    $(window).bind('scroll',function () {
        clearTimeout(timer);
        timer = setTimeout( refresh , 150 );
        scrolling=true;
        if (hovering==1) {
            if ($(window).scrollTop() !== 0) {
                alert("HOVERING; NOT AT TOP");
            } else if ($(window).scrollTop() === 0) {
                alert("HOVERING; AT TOP");
            }
        }
    });
    var refresh = function () { 
        scrolling=false;
    };
})();