Warum funktioniert meine CSS-Sichtbarkeit bei schwebenden ausgeblendeten Elementen nicht?

CSS-Sichtbarkeit funktioniert nicht: Fehlerbehebung und Lösung

Die „Spoiler“-Klasse in CSS soll versteckten Text anzeigen, wenn Sie mit der Maus darüber fahren , aber aus irgendeinem Grund bleibt der Text unsichtbar. Um dieses Problem zu beheben, müssen wir verstehen, warum die Sichtbarkeit in diesem Kontext nicht funktioniert.

Das Problem entsteht, weil Sie nicht mit der Maus über ein ausgeblendetes Element fahren können. Wenn die Sichtbarkeit auf „Ausgeblendet“ eingestellt ist, sind das Element und sein Inhalt für Mausereignisse, einschließlich Mausbewegungen, praktisch unsichtbar.

Um dieses Problem zu beheben, besteht eine Lösung darin, das ausgeblendete Element in einem anderen Containerelement zu verschachteln. Dadurch kann der Mauszeiger über den äußeren Container bewegt werden, wodurch die Sichtbarkeitsänderung für das verschachtelte Element ausgelöst wird:

CSS:

.spoiler span {
    visibility: hidden;
}

.spoiler:hover span {
    visibility: visible;
}

HTML:

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

Dieser Ansatz stellt sicher, dass das verschachtelte Element ausgeblendet bleibt, bis die Maus über den äußeren Container schwebt.

Darüber hinaus können Sie in Chrome dem ausgeblendeten Element eine Kontur hinzufügen, um es zu erstellen Es ist einfacher zu interagieren mit:

.spoiler {
    outline: 1px solid transparent;
}

Dieser aktualisierte Code ermöglicht ein einfacheres Umschalten der Sichtbarkeit, indem Sie mit der Maus über den Umriss des ausgeblendeten Elements fahren.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine CSS-Sichtbarkeit bei schwebenden ausgeblendeten Elementen nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!