jQuery mouseenter werkt prima met de muis, maar niet met de tab-toets

 
$( "#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 );
  });

Dit stukje jQuery werkt geweldig met de muis over, maar niet met de tab-toets om! Heb je een soortgelijk probleem ondervonden?

Ik heb .bind geprobeerd om beide gebeurtenissen te activeren en werkte nog steeds niet!

als de gebeurtenis op mouseenter wordt geactiveerd maar er niets op scherp staat!

1
toegevoegd bewerkt
Bekeken: 33
de bron
ro ru fr es pt de hi bn ar
Gebruik CSS-klassen ... geen individuele stijlen.
toegevoegd de auteur Incognito, de bron
Geen serieus gebruik van een klas, ik huiver hier en knars mijn tanden, alleen kijkend naar hoe lelijk die code is, want je moet .css (123) .css (456) .css (789) in plaats van .addClasS ("foo")
toegevoegd de auteur Incognito, de bron
lijkt hier te werken jsfiddle.net/atoswchataigner/Yveuj/3
toegevoegd de auteur user472285, de bron
waarom is het dat u een combonatie van $ en jQuery gebruikt?
toegevoegd de auteur Neal, de bron
Ben je verbaasd dat muis invoeren niet wordt geactiveerd wanneer je dingen doet op het toetsenbord ?
toegevoegd de auteur Jon, de bron
Gebruik in plaats daarvan focus en vervagen of focusout . Ik denk dat die allemaal in staat zijn om toetsenbord- en muisevenementen te verwerken.
toegevoegd de auteur Jorge Guberte, de bron

2 antwoord

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

Om je code op zowel mouseenter als focus te laten vuren, is dit iets dichterbij:

$("#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
toegevoegd
de bron
@xgrioux dit antwoord is 6 jaar oud en de bind() -gebeurtenis die het gebruikt is verouderd, want het werkt mogelijk als u jQuery-migratie nodig hebt. Gebruik als alternatief de nieuwere off() en aan() event-bindingsfuncties. Meer hier: api.jquery.com/on
toegevoegd de auteur totallyNotLizards, de bron
ja dat heb ik ook nog geprobeerd, nog steeds niets!
toegevoegd de auteur user472285, de bron
lijkt niet te werken
toegevoegd de auteur Crystal, de bron
Bedankt @ jammypeach
toegevoegd de auteur Crystal, de bron
Zo zou het moeten zijn: "...). Op ('mouseenter focus', ..."
toegevoegd de auteur Crystal, de bron

Muisgebeurtenissen schieten over het algemeen niet voor toetsaanslagen. .focus() en .blur() zijn wat u zoekt.

Bewerken: de meeste niet-formulierelementen kunnen standaard geen focus accepteren, u moet een attribuut tabindex aan hen toevoegen:

  •  ... 
    •
    2
    toegevoegd
    de bron
    dat werkt niet
    toegevoegd de auteur user472285, de bron
    het werkt inderdaad met een tabbladindex maar niet zonder
    toegevoegd de auteur user472285, de bron
    bekijk hier het voorbeeld jsfiddle.net/atoswchataigner/Yveuj/3
    toegevoegd de auteur user472285, de bron
    En om code te vermijden, gebruikt u .bind ('mouseenter focus', function() {...}) en zo verder.
    toegevoegd de auteur GregL, de bron
    @user: heb je het attribuut tabindex aan je element toegevoegd?
    toegevoegd de auteur Andy E, de bron