Question

我用jQuery编写了一个mouseover淡入淡出效果按钮。我的问题是，当光标鼠标悬停在图像上时，它会淡化为白色而不是"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;
}

See this fiddle

用jQuery鼠标悬停淡入淡出效果按钮

2 个答案: