1

この JSFiddle では、画像に単純なマウスオーバーを実行しようとしています。画像が変更され、マウスがオフになり、画像が元に戻ります。しかし、何らかの理由で、コードに問題が見られません。

http://jsfiddle.net/gmULU/2/

  $(document).ready(function(){
 $('.normalClassName').click(function () {
$(this).addClass('hoverClassName');
}, function () {
$(this).removeClass('hoverClassName');
});
});

元の画像がタイル化する「タイル化」の問題があるようです。JSFiddle を参照してください。

また、追加する必要があるコードを誰かに教えてもらえれば、2 番目の画像をマウスでクリックすると、右側に別の画像が表示され、3 番目の画像をクリックしてリンクに移動できます。 . ありがとう

4

2 に答える 2

1
  1. mouseoverまたはで発生させたい場合はhover、なぜ使用するの.click()ですか?
  2. .click()は付いていませんhandlerOut。

質問で述べているように（背景ではなく）画像を切り替えるだけでよい場合（コードを見落としています）、これを使用できます：

$(document).ready(function () {
    $('.normalClassName').hover(function () {
        $(this).find('img').attr( 'src', 'http://creativebits.org/files/500px-Apple_Computer_Logo.svg_.png' );
    }, function () {
        $(this).find('img').attr( 'src', 'http://www.applegazette.com/wp-content/uploads/apple-logo.jpg' );
    });
});

これは、作業中のフィドル更新へのリンクです。

于 2013-02-04T01:46:04.937 に答える
0

ある画像から別の画像への交換のみが必要な場合は、次のようにすることができます。

HTML

<div class="normalClassName"></div>

CSS

.normalClassName {
    width: 512px;
    height: 512px;
    background: transparent url('http://www.applegazette.com/wp-content/uploads/apple-logo.jpg') top left no-repeat;
}

.normalClassName:hover {
     background: transparent url('http://creativebits.org/files/500px-Apple_Computer_Logo.svg_.png') top left no-repeat;
}

このようにして、マウスがホバリングしているときに背景が画像から別の画像に切り替わりますが、同じサイズの画像を使用することを忘れないでください。

ここでテストするフィドル。ご覧のとおり、画像にはさまざまなサイズがあり、効果は醜いです。

于 2013-02-04T01:43:31.273 に答える