jQuery mouseenterとmouseleaveはちらつきを作成します

Question

まず最初に、これは繰り返しの質問ではありません。私は他の質問を見てきましたが、何も動作していない/私がやっていることには当てはまります。

問題は、ターゲットdivにマウスを移動すると、マウスを動かすとエフェクトがちらつき、同じ場所にマウスを置くとちらつきません。

私は代わりに.showと.hideを使用してみました。希望の効果が得られる他の機能を試しましたが、まだまだちらつきの問題があります。

これは私が使用したHTMLです。

<div class="four-icons"> 
    <div class="icon-wrapper col-md-3"> 
     <div class="mouse-over-1"><img src="img/bookatable-hover.png"></div> 
     <img class="icons-1" src="img/book%20a%20table.jpg"> 
    </div> 
    <div class="icon-wrapper col-md-3"> 
     <div class="mouse-over-2"><img src="img/menus-hover.png"></div> 
     <img class="icons-2" src="img/menus.jpg"> 
    </div> 
    <div class="icon-wrapper col-md-3"> 
     <div class="mouse-over-3"><img src="img/christmas-hover.png"></div> 
     <img class="icons-3" src="img/christmas.jpg"> 
    </div> 
    <div class="icon-wrapper col-md-3"> 
     <div class="mouse-over-4"><img src="img/contactus-hover.png"></div> 
     <img class="icons-4" src="img/contact.jpg"> 
    </div> 
</div> 

これは、対応するjQueryのです：コードが住んでいるのはここ

$(document).ready(function(){ 


    $("img.icons-1").mouseenter(function(){ 
     $("div.mouse-over-1").css("display", "block").css("position", "absolute"); 
    }); 
    $("img.icons-1").mouseleave(function(){ 
     $("div.mouse-over-1").css("display", "none"); 
    }); 



    $("img.icons-2").mouseover(function(){ 
     $("div.mouse-over-2").css("display", "block").css("position", "absolute"); 
    }); 
    $("img.icons-2").mouseout(function(){ 
     $("div.mouse-over-2").css("display", "none"); 
    }); 



    $("img.icons-3").mouseover(function(){ 
     $("div.mouse-over-3").css("display", "block").css("position", "absolute"); 
    }); 
    $("img.icons-3").mouseout(function(){ 
     $("div.mouse-over-3").css("display", "none"); 
    }); 



    $("img.icons-4").mouseover(function(){ 
     $("div.mouse-over-4").css("display", "block").css("position", "absolute"); 
    }); 
    $("img.icons-4").mouseout(function(){ 
     $("div.mouse-over-4").css("display", "none"); 
    }); 


}); 

は次のとおりです。http://muhammadkasimali.co.uk/Cruise/ あなたが問題を再現したいと思います念のために。

また、私はJSfiddleを作成しようとしましたが、動作させることができませんでした。私はかなり多くのnoobですので、これは悪い質問です。

Answer 1

あなたは親要素でのMouseEnter/mouseLeaveイベントをバインドする必要があり、このコードは動作するはずです：

Javascriptを

$(document).ready(function(){ 

    $(".icon-wrapper").mouseenter(function(){ 
     $(this).find('div').css("display", "block").css("position", "absolute"); 
    }); 
    $(".icon-wrapper").mouseleave(function(){ 
     $(this).find('div').css("display", "none"); 
    }); 

}); 

Answer 2

を.cssメソッドの前に.stop(true, true)を追加します。あなたが流れ、絶対位置からの切り替え

Docs

$(document).ready(function(){ 


$("img.icons-1").mouseenter(function(){ 
    $("div.mouse-over-1").stop(true,true).css("display", "block").css("position", "absolute"); 
}); 
$("img.icons-1").mouseleave(function(){ 
    $("div.mouse-over-1").stop(true,true).css("display", "none"); 
}); 



$("img.icons-2").mouseover(function(){ 
    $("div.mouse-over-2").stop(true,true).css("display", "block").css("position", "absolute"); 
}); 
$("img.icons-2").mouseout(function(){ 
    $("div.mouse-over-2").stop(true,true).css("display", "none"); 
}); 



$("img.icons-3").mouseover(function(){ 
    $("div.mouse-over-3").stop(true,true).css("display", "block").css("position", "absolute"); 
}); 
$("img.icons-3").mouseout(function(){ 
    $("div.mouse-over-3").stop(true,true).css("display", "none"); 
}); 



$("img.icons-4").mouseover(function(){ 
    $("div.mouse-over-4").stop(true,true).css("display", "block").css("position", "absolute"); 
}); 
$("img.icons-4").mouseout(function(){ 
    $("div.mouse-over-4").stop(true,true).css("display", "none"); 
});