jquery检查鼠标是否在元素上

我有一个我创建的“种类”菜单，当你的鼠标在一个元素上时，元素会得到不同的背景，并显示另一个元素。我只有当鼠标不在第一个元素和第二个元素上时，我需要这两个元素才会回到原点状态。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>

$(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(); 
    }); 

});

来源

2016-09-19 ALEXM

你在哪里'html' –

你应该重新考虑你的HTML标记，使有针对性的DIV作为相关父项的子项并使用'mouseenter'而不是'mouseover'。作为一个方面的说明，你可以在你的案例中发现它很有趣：http://cherne.net/brian/resources/jquery.hoverIntent.html –

试试这个：

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

使用相应

或者使用的是（），如：

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

来源

2016-09-19 15:40:02

你会如何将它应用于OP的情况？ –

这是新的代码，但现在它dosnt隐藏元素$（'。header-gallery-ico-box'）。on（'mouseleave'，function（）{var tabId = $（this）.attr（'data- （）“）; var isHovered = $（'＃'+ tabId）.is（”：hover“）; if（isHovered == true）{（this）.css（{”background-color“：”透明“}）; $（'＃'+ tabId）.hide（）; } }）; – ALEXM

jquery检查鼠标是否在元素上

回答

相关问题