2

例如，如果我将鼠标悬停在 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>
4

0 回答 0