마우스가 요소 위에 있는지 확인 jquery

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

(따라

을 사용 또는 사용 인)과 같은 :

이

내가 무엇을 가지고

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