fadeinとfadeoutのjqueryアニメーション

Question

fadeinやfadeoutのようなdivタグのアニメーションを追加します。
ユーザーがdivタグにマウスを置くと、そのタグがフェードアウトされます。
divタグの外にマウスを置くと、そのタグがフェードインします。
これはテストコードです。

  $('#div1').mouseleave(function(){ 
 
      $('#div1').fadeIn(); 
 
      console.log("out"); 
 
      }); 
 

 
      $('#div1').mouseover(function(){ 
 
      $('#div1').fadeOut(); 
 
      console.log("in"); 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1">hover over me</div>

しかし、ユーザーは、divタグの上にマウスを置いたときに、アニメーションが繰り返されます。
どうすればこの問題を解決できますか？あなた:hoverと​​場合

Answer 1

問題が何であるかが起こるかの要素は、それが​​あるときに要素がmouseleaveが呼び出されるもうので、そこではありません（あなたは私の例では緑色のボックスが表示されます）display: none;となっています。その問題を解決するには、子要素を隠し、親（orange box）を維持することですので、マウスは、親#div1の上にまだある...

$('#div1').mouseleave(function(){ 
 
    $(this).children('.fade-me').fadeIn(); 
 
    console.log("out"); 
 
}); 
 

 
$('#div1').mouseover(function(){ 
 
    $(this).children('.fade-me').fadeOut(); 
 
    console.log("in"); 
 
});

#div1 { 
 
    background-color: orange; 
 
    padding: 10px; 
 
    min-height: 20px; 
 
} 
 

 
#div1 > div { 
 
    background-color: green; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <div class="fade-me">hover over me</div> 
 
</div>

あなたは、あなたがこれを行うことができますことを知っていますCSSのみ？ CSSの例が必要な場合はお知らせください。

Answer 2

ここではjQueryを使用する必要はありません。普通のCSSを使うことができます。私にはわからない

div { 
 
    background-color: red; 
 
    transition: 1s opacity ease; /* this here makes sure that all changes to the "opacity" element happen over 1 second. */ 
 
} 
 
div:hover { 
 
    opacity: 0; 
 
}

<div> 
 
    Aravind! 
 
</div>