jquery überprüfen, ob die Maus über Element ist

Question

Ich habe eine Art von Menü erstellt, dass, wenn Ihre Maus über ein Element ist das Element einen anderen Hintergrund und ein anderes Element angezeigt wird. Ich brauche beide Elemente, um nur dann zum Ursprungszustand zurückzukehren, wenn sich die Maus nicht über dem ersten Element und dem zweiten Element befindet.

wie kann ich überprüfen, ob die Maus auch nicht über das zweite Element ist?

das ist, was ich habe:

<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

Try this:

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

es

entsprechend

Nutzung oder Verwendung ist() wie:

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