Ustawienie jQuery nie powoduje aktywacji css

Question

Występuje problem podczas ustawiania fokusu na element za pomocą jquery. To najwyraźniej nie powoduje uruchomienia właściwości focus css na elemencie.

Na przykład w moim css mam:

div.item1:focus { border:2px solid red; } 

w moim jQuery mam:

$("div.item1").focus(); 

Ostrość jest ustawiona, ale nie ma czerwony granica zastosowana do elementu.

Answer 1

div elementy nie używać selektora :focus .. zobacz the CSS2 spec

: focus pseudo-klasa ma zastosowanie, gdy element ma fokus (przyjmuje zdarzenia klawiatury lub innych form wprowadzania tekstu).

Można to zrobić:

.hoverclass { border:2px solid red; } 

$("div.item").hover(function() { 
    $(this).addClass('hoverclass') 
},function() { 
    $(this).removeClass('hoverclass') 
}); 

wykorzystuje ten .hover(), .addClass() i .removeClass()

Answer 2

focus() jest użyteczny tylko z elementów formularzy i łącza i nie będzie działać, jeśli starają się używać go na inny rodzaje elementów.

Zobacz jQuery doc for focus() uzyskać więcej informacji,

Answer 3

Od the manual:

Impreza nacisk zostanie wysłana do elementu, gdy zyskuje ostrość. To zdarzenie jest domyślnie stosowane do ograniczonego zestawu elementów, takich jak elementy (<input>, <select> itd.) I łączy (<a href>). W najnowszych wersjach przeglądarki zdarzenie można rozszerzyć, aby uwzględnić wszystkie typy elementów , jawnie ustawiając właściwość tabindex elementu. Element może uzyskać fokus za pomocą poleceń na klawiaturze, takich jak klawisz Tab lub za pomocą kliknięcia myszą elementu.

Zobacz tę odpowiedź dla przykładu: https://stackoverflow.com/a/5966034/1013082

Answer 4

Trzeba to zrobić:

$("div.item1").focus(function(){ 
     $("div.item1").css("border","2px solid red"); 
     }); 

Answer 5

idź do jQuery ostrości() strony, aby zobaczyć:

Impreza ostrości jest wysyłany do elementu, gdy zyskuje ostrość. To zdarzenie jest domyślnie stosowane do ograniczonego zestawu elementów, takich jak elementy (<input>, <select> itd.) I łączy (<a href>). W najnowszych wersjach przeglądarki zdarzenie można rozszerzyć, aby uwzględnić wszystkie typy elementów , jawnie ustawiając właściwość tabindex elementu. Element może uzyskać fokus za pomocą poleceń na klawiaturze, takich jak klawisz Tab lub za pomocą kliknięcia myszą elementu.

idź do badania PPK dnia naciskiem na przeglądarkach tutaj

PPK focus Event Browser compatibility

Wygląda jak wszystkie przeglądarki przejść test tabindex.

Answer 6

Elementy div można ustawić, jeśli mają atrybut tabindex. Zobacz tę odpowiedź tutaj:

https://stackoverflow.com/a/11928222/706284