Warum schlägt CSS „visibility:hidden' bei Hover-Effekten fehl?

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: <span class="spoiler"><span>E.T. phones home.</span></span>

Erläuterung:

Durch die Verschachtelung des ausgeblendeten Texts in einem Span-Element stellen Sie sicher, dass das äußere Spoilerelement sichtbar bleibt, sodass es das Hover-Ereignis erfassen kann. Wenn der Hover ausgeführt wird, wird das innere Span-Element sichtbar und der Spoilertext wird angezeigt.

Zusätzliche Überlegungen

In bestimmten Browsern wie Chrome kann ein kleines Problem auftreten Das versteckte Spoilerelement ist mit der Maus immer noch leicht auswählbar. Um dies zu beheben, können Sie dem Spoiler-Element einen Umriss hinzufügen:

.spoiler {
    outline: 1px solid transparent;
}

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

Mit diesen Anpassungen funktioniert Ihre Spoiler-Klasse einwandfrei, wobei die Unsichtbarkeit des verborgenen Textes erhalten bleibt und ein nahtloses Schwebeerlebnis geboten wird.

Das obige ist der detaillierte Inhalt vonWarum schlägt CSS „visibility:hidden' bei Hover-Effekten fehl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!