mit :focus-Pseudoklasse auf li oder andere element, anderes als a,input,button, etc

Ist es möglich, wählen Sie ein element fokussiert ist, wie ein:Fokus, input:focus, aber auf der anderen element wie div, li, span-oder anderes?

Wenn es nicht möglich ist, wie kann es ersetzt werden durch ein tag?
Ich bin versucht zu ändern Höhe von einem li element, wenn er konzentrierte sich, versuchte mit ein, aber die Höhe wird sich nichts ändern.

Erbeten Info :

"Können Sie auch erklären, wie setzen Sie den Fokus auf LI?"

Via css-Selektor li:focus. Sehen https://jsfiddle.net/s4nji/Rjqy5/.

  • Können Sie auch erklären, wie Sie Fokus auf LI?
  • Ich Tat es wie dieses, jsfiddle.net/s4nji/Rjqy5
  • Ich sehe nicht, wo Ihr LI Holen Sie sich konzentriert? Alles, was Sie haben ist ein Satz von LI Elemente einer einen link bekommen können, konzentriert. Und die CSS-Einstellungen für fokussierte Elemente. Das ist, warum ich fragte Sie, wie Sie konzentrieren sich auf LI element? Ich vermute, dass der einzige Weg ist, um einen Anker-tag innerhalb Ihrer LI zu machen, justierbares... nicht LI direkt natürlich...
InformationsquelleAutor s4nji | 2011-12-23
  1. 10

    Das ist einfach: fügen Sie einfach einen tabindex - Attribut der Elemente, die normalerweise nicht den Fokus erhalten.

    • Ich habe versucht, genau das auf seine JSFiddle, weil es mein Sinn gekommen, dass könnte es machen, Isoliertes... und nicht zu funktionieren scheint...
    • tabindex="0" bedeutet, dass das element fokussierbar in sequentielle navigation mit der Tastatur, aber Ihre Ordnung ist definiert durch die Dokument-source-order - moz tabindex-docs
    InformationsquelleAutor Knu
  2. 6

    Können Sie nicht fokussieren Liste posten. Auch nicht mit einem script. Ich habe versucht zu tun $("li:first").focus() aber es tut nichts. CSS nicht eingestellt, als ob es im Vordergrund. Dies bedeutet, dass Sie entweder nicht konzentrieren, Listenelemente oder dass :focus pseudo-Klassen funktionieren nicht auf Listenelemente.

    Setzen Sie Anker in Liste Elemente

    <ul>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    ...
</ul>

    Diese wird scheinbar konzentrieren Sie Ihre Liste posten, aber es wird wirklich konzentrieren Anker-tags.

    • Ich bin versucht zu ändern Höhe durch die Fokussierung ( Klick ) auf die li-Elemente. Ich habe versucht, mit ein, aber die Höhe wird sich nichts ändern.
    • Das ist ein Super Tipp!
    • Ich habe einen tabindex auf jeden Anker eingefügt in meine li-tags. Aber immer noch nicht, rufen Sie die :focus css-Regel auf Sie ... jemand hat es funktioniert ?
    • Höhe nicht ändern? Es als inline-block -.
    • die Fokussierung auf li:focus oder li a:focus? Später sollte die Arbeit natürlich.
    • Ich versuchte li a:focus, und I ersetzt :Fokus durch :active zu testen, ob es den richtigen Zugang zu meinem DOM-element, und mit einer aktiven, es löst die css-Regel. Ich bin mit Firefox up-to-date. Ich werde Lesen, einige Unterlagen über das a-tag und Fokus-Ereignis.
    • bitte geben Sie ein JSFiddle es nicht arbeiten, so kann ich hinein schauen. Ok?
    • Ich machte ein Turnschuh hier : jsfiddle.net/jcxzvsk0 Und der interessante Teil ist die Linie 95 in der CSS-Ansicht. Ich habe versucht, die Selektoren mit li:focus, a:focus. Ich versuchte, setzen Sie tabindex auf das <a> Anker. Danke 🙂
    • Es ist in der Regel sinnvoll, minimum viable Beispiel zeigt das problem. Wenn man so viel code ist es störend für diejenigen, die möchten, um Ihnen zu helfen und das problem möglicherweise in anderen teilen und nicht in der erwarteten Teil des Codes.
    • Lassen Sie uns weiter, diese Diskussion im chat.
    • Das problem ist dein Selektor #95. Ändern Sie es zu nav.menu-custom-wiki > ul > li > a:focus + div und es beginnt, welche Untermenüs auf den Menüpunkt klickt (die sich die).
    • Sollte die richtige Antwort, der Anker ist der Weg zu gehen, um den Einsatz von css :focus-pseudo-Klassen

    InformationsquelleAutor Robert Koritnik
Schreibe einen Kommentar