jQueryでhoverした時にfadeIn,離れた時にfadeOutさせたいのですがhoverしているときにfadeIn,fadeOutが繰り返されてしまいます。

html
1<img id="sample1" src="sample1small.jpg">
2<div id="overlay">
3    <div id="overlayWindow">
4      <img src="sample.jpg">
5      <p>サンプル説明　サンプル説明　サンプル説明</p>
6    </div>
7</div>

css
1#overlay {
2	display:none;
3　　width: 100%;
4　　height: 100%;
5　　position: fixed;
6　　top: 0;
7　　left: 0;
8　　background: rgba(99, 99, 99, 0.3);	
9　　z-index: 998;
10}
11
12#overlayWindow {
13	display:none;
14	width: 30%;
15　　height: 30%;
16　　margin: 100px auto;
17　　border: 2px solid #FFFFFF;
18　　background-color: #FFFFFF;
19　　text-align: center;	
20　　z-index: 999;
21}

js
1jQuery("#sample1").hover(function(){
2	jQuery("#overlay, #overlayWindow").fadeIn();	
3	},function(){
4	jQuery("#overlay, #overlayWindow").fadeOut();
5}
6)

jQueryの部分を

js
1jQuery("#sample1").mouseover(function(){
2	jQuery("#overlay, #overlayWindow").fadeIn();	
3})
4jQuery("#sample1").mouseleave(function(){
5	jQuery("#overlay, #overlayWindow").fadeOut();	
6})

js
1jQuery("#sample1").hover(function(){
2	jQuery("#overlay, #overlayWindow").stop(true,true).fadeIn();	
3	},function(){
4	jQuery("#overlay, #overlayWindow").stop(true,true).fadeOut();
5}
6)

のようにもしてみたのですが結果は同じでした。
また、試しに

js
1jQuery("#sample1").hover(function(){
2	jQuery("#overlay, #overlayWindow").fadeIn();	
3})

にしたところfadeInされて消えることはありませんでした。fadeOutを付け加えるとfadeIn,fadeOutを繰り返して困っています。
解決方法をご教示ください。

行動規範の内容に同意します

回答1件

ベストアンサー

#sample1にホバーすると、#overlayが出現して#sample1を覆います。
そのため、#sample1がホバーアウトして#overlayが非表示になります。
すると、#sample1を覆うものがなくなるので再びホバーインして#overlayが出現します。
上記を繰り返す状態になっています。

#overlayのマウスイベントをpointer-events: none;で無効化すれば、ご希望の動作になるでしょう。

css
1#overlay {
2  display: none;
3  width: 100%;
4  height: 100%;
5  position: fixed;
6  top: 0;
7  left: 0;
8  background: rgba(99, 99, 99, 0.3);	
9  z-index: 998;
10  pointer-events: none; /* 追加 */
11}