interest-delay-start

Syntax

/* Keyword or custom delay */
interest-delay-start: normal;
interest-delay-start: 2s;
interest-delay-start: 250ms;

/* Global values */
interest-delay-start: inherit;
interest-delay-start: initial;
interest-delay-start: revert;
interest-delay-start: revert-layer;
interest-delay-start: unset;

Werte

normal

Setzt die Verzögerung auf die Standardverzögerung des Browsers. Dies ist der Anfangswert.

<time>

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

Formale Definition

Formale Syntax

interest-delay-start = 
  normal  |
  <time>  

Beispiele

Erstellen eines grundlegenden interest-delay-start Effekts

In diesem Beispiel zeigen wir, wie sich interest-delay-start auf das Verhalten von Interest Invokers auswirkt.

HTML

Das Markup umfasst 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 der id des <p>-Elements entspricht. Dies macht den Absatz zum Ziel-Element. Der Absatz wird durch das popover Attribut zu einem Popover, das anfangs versteckt ist.

<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-start</code> of <code>2s</code>
  </label>
</form>

CSS

Im CSS spezifizieren wir eine Regel mit einem .delay Selektor, der einen interest-delay-start Wert von 2s auf jeden Interest Invoker anwendet, auf den die delay Klasse gesetzt ist. Wir werden dies auf das <button> setzen, wenn das Kontrollkästchen mit JavaScript aktiviert ist.

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

JavaScript

In unserem Skript holen wir Referenzen zum <button> und zum Kontrollkästchen und erstellen dann einen Event Listener, der die delay Klasse am <button> umschaltet, wann immer 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 an dem Button zu zeigen (zum Beispiel durch Hovern oder Fokussieren) und verlieren Sie dann das Interesse, um das Anzeigen und Verstecken des Popovers zu beobachten. Standardmäßig zeigt und versteckt sich das Popover nach einer sehr kurzen Verzögerung.

Aktivieren Sie jetzt das Kontrollkästchen und versuchen Sie die gleichen Aktionen erneut. Dieses Mal sollte das Popover nach einer Verzögerung von 2s erscheinen, wenn Interesse gezeigt wird. Die Verzögerung, nachdem das Interesse verloren ist, sollte unverändert bleiben.

Entfernen von interest-delay-start, nachdem Interesse gezeigt wurde

In diesem Beispiel zeigen wir, wie interest-delay-start von mehreren Interest Invoker Elementen entfernt wird, nachdem an einem von ihnen Interesse gezeigt wurde.

Dies ist eine nützliche Technik. Ein Popover erscheinen zu lassen, sobald Interesse an einem Invoker gezeigt wird, würde eine ablenkende und störende Benutzererfahrung schaffen, weshalb Browser standardmäßig eine kleine Verzögerung hinzufügen (siehe die interest-delay Beschreibung für mehr Details). Sobald Benutzer jedoch Interesse an einem Invoker gezeigt haben, ist es sinnvoll, ihnen zu erlauben, sich schnell ohne Verzögerung zwischen anderen Invokern zu bewegen.

HTML

Das Markup enthält drei <button>-Elemente, die in einem Absatz mit der Klasse container umschlossen sind, und einen weiteren Absatz, der mithilfe des popover Attributs in ein Popover verwandelt wurde. Alle drei Buttons sind als Interest Invokers eingerichtet und beziehen sich über das interestfor Attribut auf das Popover als ihr Ziel.

<p class="container">
  <button interestfor="mypopover">Button 1</button>
  <button interestfor="mypopover">Button 2</button>
  <button interestfor="mypopover">Button 3</button>
</p>
<p id="mypopover" popover>Hover tooltip</p>

CSS

Im CSS setzen wir einen interest-delay-start Wert von 1s für die Buttons und positionieren das Popover unterhalb des Buttons, auf den Interesse gezeigt wird, indem wir ihm einen position-area Wert von bottom geben (siehe Popover Verankerungspositionierung für mehr Informationen).

button {
  interest-delay-start: 1s;
}

#mypopover {
  position-area: bottom;
}

Schließlich kombinieren wir die :interest-source Pseudoklasse mit der :has() Pseudoklasse, um interest-delay-start: 0s auf alle Buttons im Absatz anzuwenden, aber nur, wenn der Absatz einen Button enthält, auf dem Interesse gezeigt wurde (das heißt, er wird durch button:interest-source übereinstimmend).

.container:has(button:interest-source) button {
  interest-delay-start: 0s;
}

Ergebnis

Dies wird wie folgt gerendert:

Versuchen Sie, Interesse an einem beliebigen Button zu zeigen und bemerken Sie, wie das Popover ohne Verzögerung erscheint, wenn Sie dann sofort Interesse an einem anderen Button zeigen. Wenn Sie das Interesse an den Buttons beenden und dann erneut beginnen, kehrt die anfängliche Verzögerung zurück.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• interest-delay-end, interest-delay
• Popover API
• Verwendung von Interest Invokers
• CSS grundlegendes Benutzerinterface Modul