interest-delay-end
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die interest-delay-end CSS Eigenschaft legt die Verzögerung zwischen dem Verlust des Interesses eines Benutzers an einem interest invoker Element und dem Auslösen des loseinterest Ereignisses fest.
Die Eigenschaften interest-delay-end und interest-delay-start können beide mit der Kurzform interest-delay festgelegt werden.
Syntax
/* Keyword or custom delay */
interest-delay-end: normal;
interest-delay-end: 2s;
interest-delay-end: 250ms;
/* Global values */
interest-delay-end: inherit;
interest-delay-end: initial;
interest-delay-end: revert;
interest-delay-end: revert-layer;
interest-delay-end: unset;
Werte
Formale Definition
Wert in der Datenbank nicht gefunden!Formale Syntax
interest-delay-end =
normal |
<time>
Beispiele
Erstellen eines grundlegenden interest-delay-end Effekts
In diesem Beispiel demonstrieren wir, wie interest-delay-end das Verhalten von Interest Invokern beeinflusst.
HTML
Die Markup enthält ein <button>, ein <p>, und ein <input> vom Typ checkbox. Wir definieren das <button> als Interest Invoker, indem wir ihm das interestfor Attribut geben, dessen Wert mit der id des <p> Elements übereinstimmt. Dies macht den Absatz zum Zielelement. Der Absatz wird durch das popover Attribut in ein Popover umgewandelt, welches ihn zunächst verbirgt.
<button interestfor="mypopover">Button</button>
<p id="mypopover" popover>Hover tooltip</p>
<form>
<input type="checkbox" id="apply-delay" />
<label for="apply-delay">
Apply an <code>interest-delay-end</code> of <code>2s</code>
</label>
</form>
CSS
Im CSS geben wir eine Regel mit einem .delay Selektor an, die einen interest-delay-end Wert von 2s auf jeden Interest Invoker anwendet, auf den die delay Klasse gesetzt wird. Wir werden dies mit JavaScript auf das <button> anwenden, wenn das Kontrollkästchen aktiviert wird.
.delay {
interest-delay-end: 2s;
}
JavaScript
In unserem Skript holen wir Referenzen zum <button> und zum Kontrollkästchen und erstellen dann einen Eventlistener, der die delay Klasse auf dem <button> umschaltet, wenn sich der Wert des Kontrollkästchens ändert (wenn es aktiviert oder deaktiviert wird).
const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
btn.classList.toggle("delay");
});
Ergebnis
Dies wird wie folgt gerendert:
Versuchen Sie, Interesse am Button zu zeigen (zum Beispiel durch Überfahren mit der Maus oder Fokussieren) und dann das Interesse zu verlieren, um das Popover zu beobachten, das sich zeigt und versteckt. Standardmäßig zeigt und versteckt sich das Popover nach einer sehr kurzen Verzögerung.
Aktivieren Sie nun das Kontrollkästchen und probieren Sie dieselben Aktionen erneut aus. Diesmal sollte die Verzögerung zwischen dem Zeigen von Interesse und dem Erscheinen des Popovers nicht beeinflusst werden, aber die Verzögerung zwischen dem Verlust des Interesses und dem Verschwinden des Popovers sollte auf 2s erhöht werden.
Spezifikationen
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # propdef-interest-delay-end |