Jquery 문제를 사용하여 이미지 마우스 오버시 DIV 숨기기 표시

Question

배경 : 아래 그림이 DIV 태그 아래에 싸여 있습니다. 사용자가 이미지에 mouseover을 입력하면 overlayInfo DIV 태그가 나타납니다 (아래 코드).

<script type="text/javascript"> 

     $(document).ready(function() 
     { 
      $("#overlayInfo").hide(); 

      $("#ProjectPicture").hover(function(event) { 
       $("#overlayInfo").show(); 
      }); 

      $("#ProjectPicture").mouseleave('mouseleave', function() { 
       $("#overlayInfo").hide(); 
      }); 

     }); 
    </script> 

<div id="ProjectPicture"> 
    <img src="image1.png"> 
</div> 

<div id="overlayInfo"> 
    <i class="fa fa-cloud" title="Web"></i> 
    <i class="fa fa-shopping-cart" title="Shopping Cart"></i> 
</div> 

문제 : 이미지의 마우스 오버 이벤트에보고하고 여러 문제가 있습니다. 이미지 크기는 250 x 200 픽셀입니다.

1. overlayInfo 태그는 이미지 마우스 오버에 간헐적으로 나타납니다
2. 사용자가 안정

되는 대신 이미지에 마우스를 이동하면 overlayInfo 태그 내가 잘못하고 있어요 있나요 깜박입니다.

추가 JSFiddle http://jsfiddle.net/2My79/5/

Answer 1

업데이트 :pointer-events: none을 추가하여 어제 을 찍은 해결 방법과 원래의 문제를 해결할 해결책을 찾았 기 때문에 문제가 해결되었습니다. 이제 더 이상 사용할 필요가 없습니다.

는

나를 위해 일한 해결책은 바이올린 도움을 http://www.backslash.gr/demos/contenthover-jquery-plugin/

@Bhavik 덕분 @ 찾을 수 있습니다.

#ProjectPicture의 마우스 오버시 깜박임 효과를 제거하려면 #overlayInfo의 CSS에 pointer-events: none;을 추가했습니다. 이것의 유일한 단점은 div 태그에있는 툴팁 표시를 중단한다는 것입니다.

전체 소스는 @http://jsfiddle.net/yashmangupta/5zBNE/1/입니다.나는 그러므로 내 솔루션을 앞서 갈거야, 빨리이 문제를 닫아야하지만 여전히 전문가의 추천

#overlayInfo 
{ 
    position: absolute; 
    width: 97%; 
    top: 10px; 
    height: 183px; 
    bottom: 0%; 
    border: 0px solid; 
    z-index: 99999; 
    background-color: rgba(255, 255, 255, 0.75); 
    pointer-events: none; 
} 

Answer 2

이 시도 :

HTML :

<div id="ProjectPicture"> 
    <img src="image1.png"> 
</div> 

<div id="overlayInfo"> 
    <i class="fa fa-cloud" title="Web"></i> 
    <i class="fa fa-shopping-cart" title="Shopping Cart"></i> 
</div> 

자바 스크립트 :

$(document).ready(function() 
    { 
     $("#overlayInfo").hide(); 

     $("#ProjectPicture").mouseover(function() { 
      $("#overlayInfo").show(); 
     }); 

     $("#ProjectPicture").mouseleave(function() { 
      $("#overlayInfo").hide(); 
     }); 

    }); 

그리고 overlayInfo div에 대한 임의의 CSS :

#overlayInfo { display: none; width: 200px; height: 200px; background-color: #000; } 

Answer 3

요소가 이미 표시되어 있는지 확인해야합니다. 이런 식으로 뭔가를 시도 :

이

$("#ProjectPicture").on('mouseenter', function() { 
    $target = $("#overlayInfo"); 
    if($target.is(':visible')) return; 
    $target.show(); 
}).on('mouseleave', function() { 
    $target = $("#overlayInfo"); 
    if(!$target.is(':visible')) return; 
    $target.hide(); 
}); 

Answer 4

당신이이를 사용할 수 있습니다

$(document).ready(function() 
     { 
      $("#ProjectPicture").mouseover(function() { 
     // do work for mouse over 
       $("#overlayInfo").show(); 
     }).mouseleave(function() { 
     $("#overlayInfo").hide(); 
     // do work for mouse out 
      }); 
     }); 

과 당신의 HTML을 :

<div id="ProjectPicture"> 
    <img src="https://lh4.googleusercontent.com/-NnUDSkolO6M/AAAAAAAAAAI/AAAAAAAAAPg/Rp2eTavq49w/s120-c/photo.jpg"> 
</div> 

<div id="overlayInfo" style=""mouseoverlay:none> 
    hello 
    <li class="fa fa-cloud" title="Web"></li> 
    <li class="fa fa-shopping-cart" title="Shopping Cart"></li> 
</div> 

라이브 예 : http://jsbin.com/tocotita/2/edit