jquery检查鼠标是否在元素上

我有一个我创建的“类”菜单，当你的鼠标在一个元素上时，该元素得到不同的背景，另一个元素出现。 只有当鼠标不在第一个元素和第二个元素上时，我才需要这两个元素返回到原始状态

如何检查鼠标是否也不在第二个元素上

这就是我所拥有的：

<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>      

试试这个：

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

相应地使用它

或者使用

is（）

类似：

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

试试这个：

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

相应地使用它

或者使用

is（）

类似：

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

---

您的位置是

html

您应该重新考虑html标记，将目标div作为相关父项的子项，并使用

mouseenter

而不是

mouseover

。作为旁注，您可能会在您的案例中发现它很有趣：您的

html

在哪里？您应该重新考虑您的html标记，将目标div作为相关父级的子级，并使用

mouseenter

而不是

mouseover

。作为旁注，您可能会在您的案例中发现它很有趣：这是新代码，但现在它没有隐藏元素$（'.header gallery ico box'）。在（'mouseleave'，function（）{var tabId=$（this）.attr（'data-tabId'）；var isHovered=$（'.'+tabId.）.is（“：hover”）；if（isHovered==true）{$（this.css（{“background color”：“transparent”}）；$（'#'+tabId.hide（）；}}）；这是新的代码，但现在它不隐藏elemnts$（'.header gallery ico box'）.on（'mouseleave'，function（）{var tabId=$（this.attr（'data-tabId'）；var isHovered=$（'#'+tabId.）.is（“：hover”）；if（isHovered==true）{$（this.css（{“背景色”：“透明的”}）$（'；