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檢查鼠標是否在元素上

回答

相關問題