Das Geheimnis lüften: Warum die CSS-Sichtbarkeit bei Hover fehlschlägt

CSS-Sichtbarkeit bietet eine bequeme Möglichkeit, die Sichtbarkeit von Elementen zu manipulieren, aber manchmal stolpert man darüber unerwartete Hindernisse. Stellen Sie sich ein Szenario vor, in dem Sie eine „Spoiler“-Klasse definiert haben, um Text zunächst unsichtbar zu machen und ihn beim Bewegen der Maus anzuzeigen. Entgegen Ihren Erwartungen verharrt der Text hartnäckig in seinem verborgenen Zustand und trotzt Ihren Schwebebemühungen.

Eintauchen in die Sache

Der Schuldige hinter diesem verwirrenden Verhalten liegt in der Natur von verborgenen Elementen. Wenn ein Element mit „visibility:hidden“ ausgeblendet wird, wird es praktisch unsichtbar und belegt keinen Platz im Seitenlayout. Das bedeutet, dass der Versuch, darüber zu schweben, im Wesentlichen dem Versuch gleicht, mit der Leere zu interagieren. Das Element registriert die Schwebeaktion einfach nicht.

Das Sichtbarkeitsdilemma lösen

Um diese Hürde zu überwinden, müssen Sie dem Element eine Möglichkeit geben, sichtbar zu bleiben auch wenn der Inhalt verborgen ist. Ein Ansatz besteht darin, das Element in einem anderen Container zu verschachteln, der das Hover-Ereignis empfangen kann. So können Sie dies erreichen:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

Spoiler: E.T. phones home.

Erläuterung:

Durch die Verschachtelung des ausgeblendeten Textes in einem Span-Element stellen Sie sicher, dass das äußere Spoilerelement sichtbar bleibt , sodass das Hover-Ereignis erfasst werden kann. Wenn der Hover ausgeführt wird, wird das innere Span-Element sichtbar und zeigt den Spoilertext an.

Zusätzliche Überlegungen

In bestimmten Browsern wie Chrome kann ein kleines Problem auftreten Das versteckte Spoilerelement ist mit der Maus noch leicht auswählbar. Um dieses Problem zu beheben, können Sie dem Spoilerelement eine Gliederung hinzufügen:

.spoiler {
    outline: 1px solid transparent;
}

Dieser transparente Umriss stellt sicher, dass das Spoilerelement ausreichend groß ist, um das Hover-Ereignis zu empfangen, ohne die Gesamtsichtbarkeit des Textes zu beeinträchtigen.

Mit diesen Anpassungen funktioniert Ihre Spoilerklasse einwandfrei und konserviert die Unsichtbarkeit des verborgenen Textes und die Bereitstellung eines nahtlosen Schwebeerlebnisses.