interest-delay-end CSS-Eigenschaft

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

Diese Eigenschaft wird als ein <time> Wert oder das Schlüsselwort normal angegeben:

normal

Setzt die Verzögerung auf die standardmäßige Verzögerung des Browsers. Dies ist der Anfangswert.

<time>

Legt die Verzögerung auf eine spezifische Dauer fest. Der Wert muss positiv sein, andernfalls wird die Eigenschaft ungültig.

Formale Definition

Formale Syntax

interest-delay-end = 
  normal  |
  <time>  

Beispiele

Erstellen eines grundlegenden interest-delay-end Effekts

In diesem Beispiel zeigen wir, wie sich interest-delay-end auf das Verhalten eines Interest Invoker auswirkt.

HTML

Das Markup enthält einen <button>, einen <p>, und ein <input> vom Typ checkbox. Wir spezifizieren den <button> als Interest Invoker, indem wir ihm das interestfor Attribut geben, dessen Wert mit der id des <p> Elements übereinstimmt. Dies macht den Paragraphen zum Zielelement. Der Paragraph wird zu einem Popover, indem er das popover Attribut erhält, das 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 spezifizieren wir eine Regel mit einem .delay Selektor, der einen interest-delay-end Wert von 2s auf jeden Interest Invoker anwendet, bei dem die delay Klasse gesetzt ist. Wir werden dies auf den <button> anwenden, wenn das Kontrollkästchen mit JavaScript ausgewählt wird.

.delay {
  interest-delay-end: 2s;
}

JavaScript

In unserem Skript erhalten wir Referenzen zum <button> und dem Kontrollkästchen, dann erstellen wir einen Event-Listener, der die delay Klasse auf dem <button> umschaltet, wann immer sich der Wert des Kontrollkästchens ändert (wenn es ausgewählt oder abgewählt wird).

const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
  btn.classList.toggle("delay");
});

Ergebnis

Dies wird wie folgt dargestellt:

Versuchen Sie, Interesse am Button zu zeigen (zum Beispiel durch Überfahren mit der Maus oder Fokussieren) und verlieren Sie dann das Interesse, um das Popover zu sehen, das angezeigt und versteckt wird. Standardmäßig wird das Popover nach einer sehr kurzen Verzögerung angezeigt und verborgen.

Aktivieren Sie nun das Kontrollkästchen und versuchen Sie die gleichen Aktionen erneut. Dieses Mal sollte die Verzögerung zwischen dem Zeigen von Interesse und dem Erscheinen des Popovers unverändert sein, aber die Verzögerung zwischen dem Verlieren von Interesse und dem Verschwinden des Popovers sollte auf 2s erhöht sein.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• interest-delay-start, interest-delay
• Popover API
• Using interest invokers
• CSS Basic User Interface Modul