1

jQuery を使用して単純な画像のロールオーバーを実行しようとしていますが、このコードは機能しません。

HTML:

<div class="secondcircle" id="circleone">
    <p>
        <img src="/../ex/img/group1.png">
    </p>
</div>

JS:

$("#circleone").hover(
  function () {
    $(this).html("<p><img src=\"/../ex/img/group2.png\"></p>");
  },
  function () {
    $(this).html("<p><img src=\"/../ex/img/group1.png\"></p>");
  }
);

マウス入力イベントは問題なく発生しますが、マウスが離れると何も起こりません。

さらに、コードはより単純なアクションで正常に機能します。スパンを追加してから削除する jQuery ドキュメントの例は、正常に機能します。

html が機能しないのはなぜですか? 私は何年もこれにこだわってきました。

更新:ほぼすべての回答/コメントは、画像ソースを置き換えることを提案しています。これは完全に機能しますが(ありがとう!)、HTMLを変更する必要がある場合があります(テキストの変更など)。これはほんの一例です。申し訳ありませんが、質問でそれを指定するべきでした。

4

6 に答える 6

2

全体を置き換えるのでHTMLはなく、画像のソースを変更することをお勧めします。

$("#circleone").hover(function () {
    $(this).find('img').attr("src","/../ex/img/group2.png\");
  },
  function () {
    $(this).find('img').attr("src","/../ex/img/group1.png\");
  }
);
于 2013-06-26T21:08:01.777 に答える
2

調整すると機能するので、次のimgように を置き換えるだけです。

http://jsfiddle.net/7etUU/

div主な問題は、幅の 100% にまたがるブロック要素であることだと思います。ホバーするとコンテンツが置き換えられ、コンテンツが削除されるため、点滅します。

于 2013-06-26T21:08:18.747 に答える
2

CSSでこれをやらないのはなぜですか？

#circleone {
  background-image:url('FirstImageURL');
}

circleone:hover{
  background-image:url('SecondImageURL');
}

この質問からこれを完全に盗みました。

于 2013-06-26T21:09:00.570 に答える
1

あなたのdivは100％の幅を取っていると思います。「float:left」CSS プロパティを追加してみてください。このような...

.secondcircle{
    float : left;
}
于 2013-06-26T21:05:19.403 に答える
1

HTML 全体を hover イベントに置き換える必要はありません。ホバー時に画像を変更することが目標の場合は、attr代わりにhttp://api.jquery.com/attr/のメソッドを使用します。

HTML

<div class="secondcircle" id="circleone">
    <p>
        <img id="img1" src="http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg" />
    </p>
</div>

jQuery

$("#circleone").hover(
  function () {
      $("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg', 'alt':'MyAlt1' });
  },
  function () {
    $("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg', 'alt':'MyAlt2' });
  }
);

JsFiddle の作業はこちら: http://jsfiddle.net/TBMxm/1/

また、これはパフォーマンスとベスト プラクティスの観点からも優れています。

アップデート1

HTML メソッドを使用する場合の jQuery コード:

var originalContent = $('#circleone p').html();

$("#circleone").hover(
  function () {
      $('#circleone p').html('<img src="http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg"/>');
  },
  function () {
   $('#circleone p').html(originalContent);
  }
);

HTML を使用した作業サンプル: http://jsfiddle.net/TBMxm/3/

于 2013-06-26T21:13:17.483 に答える
1

これをテストしていると、奇妙なことに気付きました。彼の元の方法は、親 div の周りに境界線を追加するまで機能しません。その後、問題なく機能します。

その理由を知っている人はいますか？

jsフィドル

/*UNCOMMENT ME AND I WILL WORK
#circleone
{
    border: 1px solid #000;
}*/
于 2013-06-26T21:16:10.997 に答える