Jqueryで2画像にホバー

Question

Jqueryのホバー効果で2つの画像を交互に表示しようとしていますが、問題があります。私のマウスがホバー効果でdivにまだ入っていると、2つの画像が点滅します。マウスがまだdivにあるときに私の画像が点滅しないようにしたい。

私のjqueryコードはおそらくどこかで間違っています（私は初心者です）。

$(document).ready(function() { 
 

 
    $(".project").hover(function() { 
 
     $(this).hide(); 
 
     $(this).next('div').show(); 
 
    }, function() { 
 
     $(this).show(); 
 
     $(this).next('div').hide(); 
 
    }); 
 

 
});

.hover { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt=""> 
 
</div> 
 

 
<div class="hover"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt=""> 
 
</div>

編集：あなたの答えをありがとう。私はこの解決策を試します：

$(document).ready(function() { 

$(".project").mouseover(function() { 
    $('.hover').show(); 
    $('.project').hide(); 
}); 

$(".hover").mouseout(function() { 
     $('.project').show(); 
    $('.hover').hide(); 
}); 

}）;

部分的に動作します。私は、他の人がプロジェクトやホバークラスを持っていると言うことを忘れていました。このコードを使用すると、すべてのホバーのdivが表示されます。私はちょうどすぐにdivにホバー効果をしたい。ここで

おかげ

Answer 1

は、あなたがそれを達成できるかの卑劣な方法です。私は<img>タグで小さなトリックをしたので、divには画像に基づいて自動的にサイズが変更されます。

希望すると便利です。

$(document).ready(function() { 
 

 
    $(".project").hover(function() { 
 
     $(".project").css("background-image","url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg)"); 
 
     
 
    }, function() { 
 
     $(".project").css("background-image", "url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg)"); 
 
     
 
    }); 
 

 
});

.project { 
 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg"); 
 
    background-repeat: no-repeat; 
 
    width: 300px; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" style="visibility: hidden;" /> 
 
</div>

Answer 2

$(document).ready(function() { 
 

 
    $(".project").mouseover(function() { 
 
    $(this).hide(); 
 
    $('.hover').show(); 
 
    }); 
 

 
    $(".hover").mouseout(function() { 
 
    $(this).hide(); 
 
    $('.project').show(); 
 
    }); 
 

 
});

.hover { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt=""> 
 
</div> 
 

 
<div class="hover"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt=""> 
 
</div>

$(".project").mouseover(function() { 
 
    $(this).hide(); 
 
    $('.hover').show(); 
 
    }); 
 

 
    $(".hover").mouseout(function() { 
 
    $(this).hide(); 
 
    $('.project').show(); 
 
    });

Answer 3

Look at below example 

あなたが例、これを達成するためのjavascriptやjqueryのを必要としない

$(document).ready(function() { 
 
$(".project").mouseover(function() { 
 
    $('.hover').show(); 
 
    $('.project').hide(); 
 
    }); 
 

 
    $(".hover").mouseout(function() { 
 
    $('.project').show(); 
 
    $('.hover').hide(); 
 
    }); 
 
});

.hover { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="project"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/320px-Gull_portrait_ca_usa.jpg" alt=""> 
 
</div> 
 

 
<div class="hover"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn.jpg/320px-Chess_pawn.jpg" alt=""> 
 
</div>