画像を隠して表示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> 

Oval-1は私のページのsvgイメージのIDです。マウスオーバーでは画像がフェードアウトしたい、マウスでは画像がフェードインするようにしたい。しかし、私のようにすると、画像がフェードアウトしますが、ただちに再びフェードインして、一度「点滅」するようになります。私はここでどこが間違っていますか？

これは、SVGを含む私のdiv要素である：PS

<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> 

：私はthisを発見したが、私はここではjQueryを使って、ないバニラJSと心配です。

Answer 1

あなたが実際にCSS

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

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

Answer 2

ここでの問題は#Oval-1要素は、このようにマウスアウトイベントをトリガ、ページから削除されていることであると難なくこれをアプローチすることができます。

アニメーション要素をラップし、そのような親にイベントをリスニング：

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

はここ