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

jquery检查鼠标是否在元素

1 个答案: