Warum kann ich den Mauszeiger nicht über ein ausgeblendetes Element bewegen: Ein CSS-Sichtbarkeitsrätsel?

Fehlerbehebung bei versteckten Elementen: CSS-Sichtbarkeitsdilemma

Auf der Suche nach Fähigkeiten zum Verstecken von Spoilern haben Sie die Hebelwirkung einer „Spoiler“-Klasse implementiert die CSS-Sichtbarkeitseigenschaft. Allerdings sind Ihre Bemühungen auf eine unerwartete Hürde gestoßen: Die Spoiler bleiben beim Schweben verborgen. Lassen Sie uns das Problem untersuchen und eine Lösung finden.

Die Herausforderung mit schwebender Unsichtbarkeit

Die CSS-Sichtbarkeitseigenschaft macht das Element, wie Sie es beabsichtigt haben, verborgen. Es gibt jedoch einen entscheidenden Vorbehalt: Sobald ein Element ausgeblendet ist, gelangt es in einen Zustand, in dem es keine Eingaben mehr empfangen kann, einschließlich Hover-Ereignissen. Dies stellt ein Dilemma dar, da das Schweben über dem verborgenen Element genau der Auslöser für das Aufdecken des Spoilers ist.

Eine kreative Lösung: Verschachtelte Elemente

Um diese Barriere zu überwinden, haben wir Ich werde eine clevere Verschachtelungstechnik anwenden. Durch Platzieren des Spoilertexts in einem verschachtelten Element können wir seine Sichtbarkeit selektiv anvisieren und umschalten, während wir die Hover-Interaktion auf dem äußeren Container beibehalten.

Aktualisierte CSS- und HTML-Struktur

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

Spoiler: <span class="spoiler"><span>E.T. phones home.</span></span>

Demo und Chrome-spezifische Verbesserung

Sehen Sie sich die Live-Demonstration hier an: http://jsfiddle.net/DBXuv/. Sie werden bemerken, dass der Spoilertext jetzt erscheint, wenn Sie mit der Maus darüber fahren.

Für Chrome-Benutzer kann eine zusätzliche CSS-Regel die Barrierefreiheit verbessern:

.spoiler {
    outline: 1px solid transparent;
}

Diese Gliederung fügt einen subtilen visuellen Hinweis auf die ausgeblendeten Elemente hinzu Präsenz, wodurch es für Benutzer einfacher wird, den Spoiler-Inhalt zu entdecken.

Aktualisierte Demo mit der Chrome-Verbesserung: http://jsfiddle.net/DBXuv/148/.

Das obige ist der detaillierte Inhalt vonWarum kann ich den Mauszeiger nicht über ein ausgeblendetes Element bewegen: Ein CSS-Sichtbarkeitsrätsel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!