verhindern, dass ein pseudo-element auslösen schweben?

Wenn ich markup:

<div class="a b"></div>

wo .eine Klasse hat eine hover-Klasse zugeordnet

und die .b-Klasse hat ein pseudo-element zugeordnet... wie so:

div
{
    width: 100px;
    height: 100px;
}
.a { background: red; display: inline-block; }
.a:hover { background: green; }

.b:after
{
    content: '';
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-left: 100px;
    background: pink;
}

Ist es möglich, mit css zu verhindern, dass ein pseudo-element auslösen die .eine Klasse hover?

FIDDLE

  • können Sie eine Momentaufnahme, wie Sie wollen und was Sie haben?
  • Afaik ist es nicht möglich, da das pseudo-element ist ein Kind des wirklichen element.
  • konnte nicht - Selektor helfen?
InformationsquelleAutor Danield | 2013-05-21
  1. 29

    Folgende css funktioniert der trick für moderne Browser (nicht IE10-):

    .b:after {
  pointer-events: none;
}

    pointer-events: none können Elemente nicht erhalten hover/click-Ereignisse.

    Sehen diese Geige.

    Vorsicht

    pointer-events Unterstützung für nicht-SVG-Elemente in einem relativ frühen Stadium. developer.mozilla.org gibt Ihnen die folgende Warnung:

    Die Verwendung von Zeiger-Veranstaltungen in der CSS-Datei für nicht-SVG-Elemente ist
    experimentell ist.     Die Funktion verwendet werden, um Teil der CSS3-UI-Entwurf
    Spezifikation aber, aufgrund der vielen offenen Fragen, wurde verschoben
    CSS4.

    Chrome-box-Modell interpretation der display: inline-block verursacht ein flackern in die oben fiddle.

    Wenn Sie mit dem Schalter display: block statt, Sie erhalten die richtige Auslegung der box.

    Firefox tritt dieses Problem nicht auf.

    Um eine konsequente box-Modell-interpretation, verwenden Sie die folgende:

    .b:after {
  pointer-events: none;
  display: block;
}

    Ansicht diese Geige in Chrome zu sehen, der flicker-Effekt.

    • hmm das ist eine gute Idee, aber ich sehe ein flackern... irgendwelche Ideen?
    • Hrm, ich kann nicht sehen, ein flackern. Welchen browser/welches OS benutzt du?
    • Ich bin mit chrome unter windows7
    • Ich habe gerade etwas aufgefallen: Wenn ich schweben in .b:nach der von der Boden - dann bekomme ich das flimmern, aber wenn ich schweben in die andere Richtung - ich verstehe das nicht das flackern. gehen Abbildung.
    • Kann ich reproduzieren, dies in Chrome (unter Linux). Firefox funktioniert einwandfrei. Könnte eine Chrom(ium) bug (obwohl ich nicht finden konnte ein matching-Problem in Ihrem bug-tracker). Fazit: Besser nicht verwenden pointer-events in cross-browser-Produktion code.
    • Fügte eine Warnung für die Produktion und Nutzung meiner Antwort
    • +1 danke für das edit... und ja du hast Recht - firefox hat kein flimmern.
    • In Chrome 42.0.2311.152 wenn Sie den Mauszeiger über den unteren Rand der Behinderten .b es wird noch auslösen schweben. 🙁

    InformationsquelleAutor tessi
Schreibe einen Kommentar