マウスオーバー（またはマウスアウト）時にコードを実行するベストプラクティス

要素をホバリングするときにコードを実行したい。ポインタが消えると何も起こりません。このコードは、私が望むものとまったく同じです：マウスオーバー（またはマウスアウト）時にコードを実行するベストプラクティス

$('li').hover(function() { 
    // actions here 
}, 
function() { 
}); 

$('ul').hover(function() { 
}, 
function() { 
    // other actions here 
});

しかし、それは醜いです。私はこのクリーンなバージョンが動作することを期待していた：

$('li').mouseover(function() { 
    // actions here 
}); 

$('ul').mouseout(function() { 
    // other actions here 
});

しかし、それはありません。 mouseover部分は、一度発射するのではなく、要素上にポインタを移動すると発砲し続けます。

提案がありますか？

出典

2017-04-10 drake035

フラグを使用して設定を残したときに、すべてのアクティブなクラスを削除する....あなたが入力したliにアクティブクラスを追加します。それが最初に発火した後はそれを偽にする。 –

li要素をホバリングすると、各li要素に関連付けられた背景画像が表示されます。リスト全体からマウスを離すと、デフォルトの背景イメージに戻りたいと思う。 li要素の間をホバリングすると、デフォルトの画像に切り替える必要はありません。 – drake035

ul

$('li').mouseenter(function(){ 
    $(this).addClass('active'); 
}); 

$('ul').mouseleave(function(){ 
    $(this).find('.active').removeClass('active'); 
})

出典

2017-04-10 16:02:24 charlietfl

あなたの代わりにマウスオーバー

あなたはおそらく event delegationを利用することを希望している

出典

2017-04-10 15:46:44

のhttps://api.jquery.com/mouseenter/のMouseEnterを使用することができます。

このような何かが動作するはず

：

$('ul').on('mouseover', 'li', function() { console.log('hovered'); });

出典

2017-04-10 15:46:50

マウスオーバーの部分は、私は、要素の上ではなく、一度発射し、私のポインタを移動すると、発射し続けます。

フラグを使用してコードブロックを1回だけ実行することはできますが、複数回の再起動からイベントが停止することはなく、最初のイベントの後のイベントは無視されます。

var flag = true; 
$('li').mouseover(function() { 
    if(flag){ 

    // actions here 
    flag = false; 
    } 
});

しかし、私は.mouseenter()を調べることをお勧めします。

スニペット

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> 
 
    </script> 
 
    </head> 
 
    <body> 
 
    <ul> 
 
     <li>list item</li> 
 
     <li>list item</li> 
 
     <li>list item</li> 
 
     <li>list item</li> 
 
     <li>list item</li> 
 
    </ul> 
 

 
    <script> 
 
     var flag = true; 
 
     $('li').mouseover(function() { 
 
     if(flag){ 
 
      console.log("testing"); 
 
      // actions here 
 
      flag = false; 
 
     } 
 
    }); 
 

 
    $('ul').mouseout(function() { 
 
    // other actions here 
 
    }); 
 

 
    </script> 
 
</body> 
 
</html>

出典

2017-04-10 15:51:32

マウスオーバー（またはマウスアウト）時にコードを実行するベストプラクティス

答えて

関連する問題