js中，當(dāng)鼠標(biāo)覆蓋圖片的時(shí)候，為什么會(huì)兩張圖片不停的來回切換閃爍，而不是，覆蓋顯示第二張，離開顯示第一張？

.hover( handlerIn, handlerOut )
是對(duì)原生mouseenter和mouseleave函數(shù)的封裝
當(dāng).first_show handlerIn函數(shù)調(diào)用后, .first_show隱藏，.second_show顯示；同時(shí).first_show的隱藏觸發(fā)handlerOut函數(shù),又將.second_show隱藏，.first_show顯示，
.first_show的顯示又會(huì)觸發(fā)handlerIn函數(shù)，就這樣不停的來回來回啦

你需要修改是對(duì)不同的元素使用其中一個(gè)監(jiān)聽器，當(dāng)鼠標(biāo)進(jìn)入.first_show顯示.second_show,
離開.second_show時(shí)顯示.first_show

//只監(jiān)聽mouseenter
$(".first_show").mouseenter(function(){
    $(this).hide();
    $(this).siblings(".second_show").show();
});

//只監(jiān)聽mouseleave
$(".second_show").mouseleave(function(){
    $(this).hide();
    $(this).siblings(".first_show").show();
});

jq 不大會(huì)，但是原理應(yīng)該是一樣的，因?yàn)槟憬壎ǖ氖?hover事件，當(dāng) $(".first_show") 滑入的時(shí)候，觸發(fā)第一個(gè)回調(diào)，隱藏這張圖片，這個(gè)隱藏動(dòng)作就觸發(fā)了滑出動(dòng)作，所以觸發(fā)了第二個(gè)回調(diào)；然后反復(fù)循環(huán)，,

$(function() {
    $(".second_show").hide();
    $(".first_show").hover(
        function() {
            $(this).hide();
            $(this).siblings(".second_show").show();
        },
        function() {});
    $(".second_show").hover(function() {}, function() {
        $(this).hide();
        $(this).siblings(".first_show").show();
    });
});

所以如果在源代碼上優(yōu)化，就是第一張圖片滑出不操作，第二張圖片滑入不操作，當(dāng)然可以選擇更好的事件，比如給父元素綁定 hover 事件，切換里面圖片，就避免了這個(gè)問題；

$(function() {
    $(".second_show").hide();
    $(".four_block").hover(
        function() {
            $(this).children(".second_show").show();
            $(this).children(".first_show").hide();
        },
        function() {
            $(this).children(".second_show").hide();
            $(this).children(".first_show").show();
        });
});

從邏輯上說，$(".first_show").hover時(shí)true則隱藏自己顯示.second_show，那好，當(dāng).second_show顯示出來時(shí)，也觸發(fā)了$(".first_show").hover的false事件，這時(shí).second_show隱藏，自己再顯示。以此不停循環(huán)下去。

要用hover的話，可以如下：

<div class="four_block inline_block" >
    <img src=""/>
</div>

$(function(){
    let first = 'https://developers.google.cn/web/images/web-fundamentals-icon192x192.png',
        second = 'https://developers.google.cn/web/images/tool_icon.png';
  
    $( 'img' )
      .attr( 'src', first )
      .hover(
          function () {
              $( this ).attr( 'src', second );
          },
          function () {
              $( this ).attr( 'src', first );
    })
})

因?yàn)樵?$(".first_show").hover'這個(gè)事件中，鼠標(biāo)移上去，你通過 $(this).hide()讓'$(".first_show")'隱藏了，同時(shí)觸發(fā)移出事件，所以會(huì)存在來回閃爍