Warum wird mein Spoilertext beim Schweben nicht angezeigt?

Fehlerbehebung bei CSS-Sichtbarkeitsproblemen für Spoiler-Elemente

Bei der Verwendung der Sichtbarkeitseigenschaft in CSS zum Erstellen von Spoiler-Elementen können einige Benutzer auf Schwierigkeiten mit dem stoßen Der Text bleibt unsichtbar, auch wenn Sie mit der Maus darüber fahren. Dieses Problem kann auf die Tatsache zurückzuführen sein, dass beim Schweben ein sichtbares Element zur Interaktion erforderlich ist.

Um dieses Problem zu beheben, besteht eine wirksame Lösung darin, das Spoilerelement in einem anderen Container zu verschachteln. Dadurch kann der Container das Hover-Ereignis empfangen, auch wenn das Spoilerelement zunächst ausgeblendet ist. Das folgende aktualisierte Code-Snippet demonstriert diese Technik:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span>

This Der Ansatz stellt sicher, dass das Containerelement beim Schweben sichtbar wird, wodurch die Sichtbarkeit des inneren Spoilerelements ausgelöst wird.

Demo:
http://jsfiddle.net/DBXuv/

Hinweis:Speziell für Chrome-Browser kann der folgende Zusatz die Funktionalität verbessern:

.spoiler {
    outline: 1px solid transparent;
}

Dieser Zusatz bietet einen visuellen Hinweis, um das Vorhandensein des Spoilers anzuzeigen, selbst wenn der ursprüngliche Text vorhanden ist ist ausgeblendet.

Aktualisierte Demo:
http://jsfiddle.net/DBXuv/148/

Das obige ist der detaillierte Inhalt vonWarum wird mein Spoilertext beim Schweben nicht angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!