3

メニューを作成し、mouseover (mouseenter) と mouseout(mouseleave) を使用しようとしましたが、残念ながらマウスを速く動かすと、一部のイベントが発生せず、ホバー イメージが元のイメージに戻りません。

画像がクリックされた場合に元の画像を表示する必要があるため、ホバーの代わりに mouseover および mouseout イベントを使用する必要があります。

デモを確認してください: デモ リンク

4

6 に答える 6

3

アイコンごとに 2 つの異なる画像要素を使用することは良い考えではないと思います。

単一の画像要素

アイコンごとに 1 つの要素を使用し、マウスオーバーとマウスアウトが発生したときにクラスとイメージ src を切り替える必要があります。

そのように（最小限の例）：

 $(".side_left").mouseover(function() {
    $(this).prop("src", "http://www.spiritualawakeningradio.com/yaha.jpg");
 }).mouseout(function(){
    $(this).prop("src", "http://img.creativemark.co.uk/uploads/images/461/13461/smallImg.png");
 });

作業フィドル: DEMO

CSSスプライトで更新

これは、CSS スプライトを使用したより良い例です。JavaScript とほとんどのマークアップは不要で、一部の CSS のみが必要です。

.side_left {
    width: 60px;
    height: 60px;
    background: url('http://i.imm.io/mvRL.png');
}
.side_left:hover {
    background-position: 60px;
}

作業フィドル: DEMO

于 2012-04-18T22:58:48.367 に答える
1

jsFiddle デモ

  • .on() メソッドを使用して、必要なマウス イベントを一覧表示しました。
  • イベント ハンドラーをアタッチし(e)て、関数内の型を確認することができます。

.

$('img.side_left').parent('div').on('mouseenter mouseleave click', function(e){
    if(e.type === 'mouseenter' || e.type==='mouseleave'){
        $(this).find('img:not(.active)').toggle();
    }else{ // IS CLICK
        $('img.active').toggle().removeClass('active');                
        $(this).find('img').addClass('active');
    }
});
于 2012-04-18T23:39:53.530 に答える
1

マウスをすばやく移動すると、.side_left_hover 要素がマウスの音を聞き始めるのに十分な時間が与えられません。

それで、どうやってそれを修正しますか？すべてのマウス リスナーを .side_left/.side_left_hover コンテナ div に配置します。これにより、コードがよりシンプルでクリーンになります。

これがフィドルです：http://jsfiddle.net/rJK3R/1/

于 2012-04-18T23:13:54.930 に答える
1

最初の変更にホバーを使用してから、onclick でクラスまたは画像ソースを変更してみてください。

于 2012-04-18T22:53:55.017 に答える
1

これは、非表示になったアイテムに対してマウス イベントを使用しているため発生しているため、十分に速く移動すると、マウスアウト イベントをトリガーするアイテムが存在しません。

元のコードを少し修正して機能させましたが、2 つのイメージ タグを破棄し、2 つのイメージ src 属性値または jQuery を使用する CSS を交換するか、純粋な CSS と :hover セレクターを使用することを検討する必要があります。

http://jsfiddle.net/MATMD/

于 2012-04-18T23:04:30.797 に答える
1

これを行うには、css を使用し、JavaScript ごとに css-classes を追加するだけです。

フィドルを更新して表示しました。これにより、必要な JavaScript コードが大幅に削減されます。私はあなたの既存のマークアップを保持しましたが、これはより少ないマークアップでも実行できると思います:

http://jsfiddle.net/3YBe4/12/

于 2012-04-18T23:08:49.187 に答える