jQuery的鼠標懸停淡入淡出效果按鈕

Question

我用jQuery寫了一個鼠標懸停淡入淡出效果按鈕。 我的問題是，當光標懸停在圖像上方時，它會淡化為白色而不是"img.b" 。有人建議為什么這樣做？

  $(document).ready(function(){
  $("img.a").hover
  ( function() { $(this).stop().animate({"opacity":"0"}, "slow");
   },
  function() {
  $(this).stop().animate({"opacity":"1"}, "slow");
  });

  });

這是CSS：

div.fadehover {
    position: relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
        }

img.b {
    position: absolute;
    left: 0;
    top: 0;
    }

這是正文代碼：

    <div class="fadehover">
    <a href="#">
    <img src="cbavota-bw.jpg" alt="" class="a" />
    <img src="cbavota.jpg" alt="" class="b" />
    </a>
    </div>

Answer 1

您的代碼運行良好。 只需確保圖像的路徑正確與否即可。它可以在FF，chrome和IE中正常工作。

Answer 2

您的代碼沒有錯。 我建議使用CSS，而不是像JavaScript那樣占用大量資源。

只需將其添加到您的代碼中並刪除JavaScript代碼

.fadehover img {
  -webkit-transition: opacity .5s ease-in-out;
        -moz-transition: opacity .5s ease-in-out;
        -ms-transition: opacity .5s ease-in-out;
        -o-transition: opacity .5s ease-in-out;
        transition: opacity .5s ease-in-out;
}

.fadehover img.a {
  opacity: 0;
}

.fadehover img.a:hover {
  opacity: 1;
}

.fadehover img.b {
  opacity: 1;
}

.fadehover img.b:hover {
  opacity: 0;
}

看到這個小提琴