onMouseOver & onMouseOut 이미지 숨기기 및 표시 - 이미지가 즉시 다시 나타납니다.

Question

다음 jquery 스크립트를 작성했습니다.

<script type="text/javascript"> 
      $(document).ready(function(){ 
      $('#Oval-1').on('mouseover', function(e) { 
       $("#Oval-1").fadeOut(); 
      }); 
       $('#Oval-1').on('mouseout', function(e) { 
         $("#Oval-1").fadeIn(); 
       }); 
      }); 
     </script> 

타원형 -1은 내 페이지에있는 svg 이미지의 ID입니다. mouseover 나는 이미지를 fadeout, mouseout에서 나는 이미지를 fadein 싶습니다. 그러나 내가 한 것처럼 이미지가 흐려 지지만 즉각적으로 사라져서 한 번 깜박입니다. 내가 여기서 어디로 잘못 가고 있니? 내가 this을 발견했다,하지만 난하지 바닐라 JS 함께, 여기 jQuery로 걱정 :

<div class="wrapper"> 
     <svg width="1024px" height="279px" viewBox="0 0 1024 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<!-- Generator: Sketch 3.6.1 (26313) - http://www.bohemiancoding.com/sketch --> 
<title>map png</title> 
<desc>Created with Sketch.</desc> 
<defs></defs> 
<g id="geschichte" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
    <g id="Desktop-Landscape" transform="translate(-145.000000, -332.000000)"> 
     <g id="map" transform="translate(107.000000, 246.000000)"> 
      <g id="mapback" transform="translate(38.000000, 86.000000)"> 
       <g id="map-png"> 


// there are further paths here, I took out for now 

              <ellipse id="Oval-1" fill="#0B619B" opacity="0.141849347" cx="929.5" cy="94.5" rx="94.5" ry="94.5"></ellipse> 


       </g> 
      </g> 
     </g> 
    </g> 
</g> 

PS :

이는 SVG를 포함하는 내 DIV이다.

Answer 1

당신은 실제로 CSS

#Oval-1 { 
    opacity: 1; 
    transition: opacity 400ms ease; 
} 

#Oval-1:hover { 
    opacity: 0; 
} 

Answer 2

여기서 문제는 #Oval-1 요소는 따라서 mouseOut 이벤트를 트리거 페이지에서 제거되고 있다는 점이다 여유롭게이 접근 할 수 있습니다.

애니메이션 요소를 포장, 그래서 같은 부모의 이벤트를 수신 :

<div id="Oval-1"> 
    <div id="test">hello</div> 
</div> 

$(document).ready(function(){ 
     $('#Oval-1').mouseover(function() { 
      $("#test").fadeOut(); 
     }); 
     $('#Oval-1').mouseleave(function() { 
      $("#test").fadeIn(); 
     }); 
    }); 

은 잘 작동하는 것 같다.

EDIT : 하위 요소를 제거해도 부모가 접히지 않아 잠재적으로 마우스를 놓을 수 있는지 확인하십시오. 당신이 바이올린 또는 유사한을 사용하는 경우

#test { 
    position: absolute; 
} 

#Oval-1 { 

    background: pink; 
    width: 300px; 
    height: 300px; 
} 

더 잘 설명하기 :

다음 CSS 규칙을 추가했습니다. 또한

,

#Oval-1 { 
    transition: all 0.5s ease-in-out; 
} 
#Oval-1:hover { 
    opacity: 0; 
} 

는