jQueryマウスセンターはマウスでうまく動作しますが、タブキーでは機能しません

$( "#list li:eq(0)" ).bind('mouseenter focus', function(event) {

jQuery("#logo img").css('top', '-132px');
console.log( event.type, " :: ", this.id );
  }).bind('blur mouseleave', function(event) {

jQuery("#logo img").css('top', '-41px');
console.log( event.type, " :: ", this.id );
  });  

このjQueryの部分は、マウスオーバーではうまくいくが、タブキーではうまくいきません! あなたは同様の問題に遭遇しましたか?

私は両方のイベントを発砲し、まだ動作していないことを試みました!

マウスセンターでイベントが発生したが、フォーカスがない場合は!

1
追加された 編集された
ビュー: 1
個々のスタイルではなく、CSSクラスを使用します。
追加された 著者 Incognito,
あなたが .css(123).css(456).css(789)を実行する必要があるので、コードを真剣に使用しているわけではありません。 .addClasS( "foo")の代わりに
追加された 著者 Incognito,
ここではうまくいくようです。 jsfiddle.net/atoswchataigner/Yveuj/3
追加された 著者 user472285,
なぜあなたは $jQuery の組み合わせを使用していますか?
追加された 著者 Neal,
キーボード上でマウス入力がトリガーしないことに驚いていますか?
追加された 著者 Jon,
代わりに focusblur または focusout を使用してください。私はそれらがキーボードとマウスイベントをすべて扱うことができると思います。
追加された 著者 Jorge Guberte,

2 答え

mouseenter and mouseleave have nothing to do with keyboard events, and are not fired when an element gains keyboard focus.

mouseenterfocus の両方でコードを起動するには、これはもう少しです:

$("#MesActivites li:eq(0)").bind("mouseenter focus", function (event) {
    jQuery("#MesActivites ul:eq(1)").css('top', '45px').css('left', '-1px');
    jQuery("#rfr-header-logo").css('display', 'none');
    console.log(event.type, " :: ", this.id);
}).bind("mouseleave blur", function (event) {
    jQuery("#MesActivites ul:eq(1)").css('top', '-1000px').css('left', '-1px');
    jQuery("#rfr-header-logo").css('display', 'block');
    console.log(event.type, " :: ", this.id);
});
3
追加された
@xgriouxこの回答は6歳で、使用する bind()イベントは非推奨です。jQueryを移行する必要があるかもしれません。代わりに、新しい off()および on()イベントバインディング関数を使用してください。詳細はこちら: api.jquery.com/on
追加された 著者 totallyNotLizards,
はい、私はまだ何もビットを試してみました!
追加された 著者 user472285,
うまくいかない
追加された 著者 Crystal,
ありがとう@jammypeach
追加された 著者 Crystal,
だからそれはすべきです: "...)。on( 'mouseenter focus'、..."
追加された 著者 Crystal,

マウスのイベントは、一般的にキーの押下では発生しません。 .focus().blur()はあなたの後になります。

編集:ほとんどの非フォーム要素はデフォルトでフォーカスを受け入れることができませんので、 tabindex 属性を追加する必要があります:

  • ...
  •   
    
    2
    追加された
    それは動作しません
    追加された 著者 user472285,
    実際にはタブインデックスで動作しますが、
    追加された 著者 user472285,
    ここでの例を確認してください。 jsfiddle.net/atoswchataigner/Yveuj/3
    追加された 著者 user472285,
    また、コードの重複を避けるために、 .bind( 'mouseenter focus'、function(){...})などを使用します。
    追加された 著者 GregL,
    @user:要素に tabindex 属性を追加しましたか?
    追加された 著者 Andy E,