Warum funktioniert mein Hover-Effekt nicht bei Elementen mit „Sichtbarkeit: versteckt' in CSS?

Sichtbarkeit funktioniert in CSS nicht: Hier erfahren Sie, warum und wie Sie es beheben können

Beim CSS-Stil kann Mehrdeutigkeit manchmal zu unerwarteten Ergebnissen führen. Lassen Sie uns ein häufiges Problem untersuchen, das beim Versuch auftritt, Text mit der Eigenschaft „Sichtbarkeit“ auszublenden.

Problem:

Ihr CSS lautet wie folgt:

.spoiler {
    visibility: hidden;
}

.spoiler:hover {
    visibility: visible;
}

Gemäß dieser Konfiguration sollte der Mauszeiger über Text mit der Klasse „.spoiler“ angezeigt werden. Dies geschieht jedoch nicht, sodass der Text unabhängig von der Mausposition unsichtbar bleibt.

Grund:

Das Problem liegt im Standardverhalten ausgeblendeter Elemente. Elemente mit „Sichtbarkeit: ausgeblendet“ werden vom Benutzeragenten bei Mausereignissen, einschließlich Hover, nicht erkannt. Daher wird der Schwebezustand nie aktiviert.

Lösung 1: Elemente verschachteln

Um diese Herausforderung zu meistern, kann man den Spoilertext in einem anderen Element verschachteln:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: <span>

Diese Lösung funktioniert, weil das verschachtelte Span-Element zunächst mit der verborgenen Sichtbarkeit versehen ist blockiert Mausereignisse. Wenn jedoch das übergeordnete Element „.spoiler“ das Hover-Ereignis empfängt, wird es aktiviert und zeigt das Span-Element an, wodurch der Text sichtbar wird.

Lösung 2 (nur Chrome): Gliederungstrick

Ein alternativer Ansatz für Chrome besteht darin, dem Element „.spoiler“ eine Gliederung hinzuzufügen:

.spoiler {
    outline: 1px solid transparent;
}

Diese Technik erstellt eine unsichtbare Hitbox, die auf Mausereignisse reagiert, sodass Hover-Effekte ordnungsgemäß funktionieren auf versteckten Elementen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein Hover-Effekt nicht bei Elementen mit „Sichtbarkeit: versteckt' in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!