jquery 检查鼠标是否在元素上

Question

我创建了一个“某种”菜单，当您的鼠标悬停在一个元素上时，该元素会获得不同的背景，并且会显示另一个元素。只有当鼠标不在第一个元素和第二个元素上时，我才需要两个元素都回到原始状态。

我如何检查鼠标是否也没有在第二个元素上？

这就是我所拥有的：

<div class="container header-gallery">
    <ul class="col-sm-2 header-gallery-box">
        <li class="header-gallery-ico-box" data-tabId="tab-a">
            <a href=""><img src="images/gallery-learn.png" class="header-gallery-ico"></a>
        </li>
        <li class="header-gallery-ico-box" data-tabId="tab-b">
            <a href=""><img src="images/gallery-speak.png" class="header-gallery-ico"></a>
        </li>
        <li class="header-gallery-ico-box" data-tabId="tab-c">
            <a href=""><img src="images/gallery-read.png" class="header-gallery-ico"></a>
        </li>
        <li class="header-gallery-ico-box" data-tabId="tab-d">
            <a href=""><img src="images/gallery-write.png" class="header-gallery-ico"></a>
        </li>
    </ul>

    <div class="col-sm-4" style="height:720px; padding:0;" >
        <div id="tab-a" class="header-gallery-tab">
            <h2>Learn</h2>
            <p>
                From Middle English...
            </p>
            <h6 style="float:right;"><a href="">Read more...</a></h6>
        </div>
        <div id="tab-b" class="header-gallery-tab">
            <h2>Speak</h2>
            <p>
                From Middle English speken...
            </p>
            <h6 style="float:right;"><a href="">Read more...</a></h6>
        </div>
        <div id="tab-c" class="header-gallery-tab">
            <h2>Read</h2>
            <p>
                From Middle English reden...
            </p>
            <h6 style="float:right;"><a href="">Read more...</a></h6>
        </div>
        <div id="tab-d" class="header-gallery-tab">
            <h2>Write</h2>
            <p>
                From Middle English
            </p>
            <h6 style="float:right;"><a href="">Read more...</a></h6>
        </div>
    </div> 
    <a href="#section2"><img src="images/downArrow.png" style="width:60px; height:60px; text-align:center; bottom:-30px; position:absolute;"></a>      

$(function(){
    $('.header-gallery-ico-box').on('mouseover',function(){
        var tabId = $(this).attr('data-tabId');
        $(this).css({"background-color":"rgba(0, 0, 0, 0.5)"});
        $('#' + tabId).delay(10).fadeIn(30);
    });
    $('.header-gallery-ico-box').on('mouseleave',function(){
        var tabId = $(this).attr('data-tabId');
        $(this).css({"background-color":"transparent"});
        $('#' + tabId).hide();
    });

});

Answer 1

尝试这个：

if ($('#element:hover').length != 0) {
    // do something
}

相应地使用它

或者is()像这样使用：

var isHovered = $('#elem').is(":hover"); // returns true or false