0

フェードで動作する画像ホバー機能を取得しようとしています。Chrome では動作しますが、Firefox と IE では動作しません。Chrome ではうまくフェードしますが、Firefox と IE ではフェードせずに交換するだけです。

私のコードは次のようになります。

$("#test1").hover(
  function() {
    $(this).css("background", "url(http://xxxxxx/wp-content/themes/xxxx/images/xxxx-color.png) center no-repeat").fadeIn("slow");
  },
  function() {
    $(this).css("background", "url(http://xxxxxx/wp-content/themes/xxxx/images/xxxxxx-bw.png) center no-repeat").fadeIn("slow");
  }
);
#footerLogosStart {
  text-align: center;
  height: 100px;
  width: 240px;
  float: left;
}

#footerLogosStart a {
  margin: 0 auto;
  padding: 0 0 20px 0;
}

#test1 {
  width: 136px;
  height: 21px;
  background: url('http://xxxxxx/wp-content/themes/xxxxxx/images/xxxxxx-bw.png') center no-repeat;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="footerLogosStart">
  <a id="test1">TEST</a>
</div>

4

1 に答える 1

0

のような css を追加する必要があるかもしれません。

#footerLogosStart a{
  display:block;
  width:100px;
  height:100px;
}

または、最初に画像のプリロードを行う必要がある場合があります。

于 2012-07-09T06:36:56.773 に答える