jquery - jquery - すべてのナビゲーション画像にカーソルを合わせると、マウスアウト時にナビゲーションのホーム画像がフェードインします

Question

たとえば、contact_text 画像がフェードアウトし、about_text 画像が即座にフェードインするのではなく、contact_text 画像と about_text 画像にカーソルを合わせると、home_text 画像がそれらの間で一時的にフェードインします。助けてください。ありがとう

注 - 画像のロールオーバー効果のために、画像に .rollover クラスを使用しています。それはおそらく私の問題とは関係ありません。

HTML

<nav>
<a href="#"><img src="images/nav/home_hover.png" id="home"></a>

<a href="#"><img src="images/nav/portfolio.png" alt="images/nav/portfolio_hover.png" class="rollover" id="portfolio"></a>

<a href="#"><img src="images/nav/about.png" alt="images/nav/about_hover.png" class="rollover" id="about"></a>

<a href="#"><img src="images/nav/contact.png" alt="images/nav/contact_hover.png" class="rollover" id="contact"></a>

</nav>

jQuery

 $(document).ready(function(){

  $('.rollover').rollover();
  });

  $("#portfolio").mouseover(function(){
    $("#homeText").fadeOut("fast");
    $("#portfolioText").fadeIn("fast");
    $("#home").attr("src","images/nav/home.png");
});
 $("#portfolio").mouseout(function(){
    $("#homeText").fadeIn("fast");
    $("#portfolioText").fadeOut("fast");
    $("#home").attr("src","images/nav/home_hover.png");
});

$("#about").mouseover(function(){
    $("#homeText").fadeOut("fast");
    $("#aboutText").fadeIn("fast");
    $("#home").attr("src","images/nav/home.png");
});
 $("#about").mouseout(function(){
    $("#homeText").fadeIn("fast");
    $("#aboutText").fadeOut("fast");
    $("#home").attr("src","images/nav/home_hover.png");
});

$("#contact").mouseover(function(){
    $("#homeText").fadeOut("fast");
    $("#contactText").fadeIn("fast");
    $("#home").attr("src","images/nav/home.png");
});
 $("#contact").mouseout(function(){
    $("#homeText").fadeIn("fast");
    $("#contactText").fadeOut("fast");
    $("#home").attr("src","images/nav/home_hover.png");
});
</script>