interest-delay
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die interest-delay CSS Eigenschaft legt die Verzögerung fest zwischen dem Zeitpunkt, zu dem der Benutzer Interesse an einem Interest Invoker Element zeigt und dem Auslösen des interest Ereignisses, sowie die Verzögerung zwischen dem Verlust des Interesses und dem Auslösen des loseinterest Ereignisses.
Zusammengesetzte Eigenschaften
Die interest-delay Eigenschaft ist eine Kurzform für die folgenden Eigenschaften:
Syntax
/* Single value */
interest-delay: normal;
interest-delay: 2s;
interest-delay: 250ms;
/* Two values */
interest-delay: 1s normal;
interest-delay: 0s 500ms;
/* Global values */
interest-delay: inherit;
interest-delay: initial;
interest-delay: revert;
interest-delay: revert-layer;
interest-delay: unset;
Werte
Die interest-delay Eigenschaft akzeptiert einen oder zwei Werte. Der erste Wert legt die Verzögerung fest, bevor Interesse gezeigt wird (interest-delay-start); der zweite Wert, falls angegeben, legt die Verzögerung fest, bevor Interesse verloren geht (interest-delay-end). Jeder Wert kann entweder das Schlüsselwort normal oder ein <time> Wert sein:
Beschreibung
Ein Steuerelement wie ein <a> oder <button> kann als Interest Invoker gesetzt werden, indem ihm das interestfor Attribut gegeben wird. Sein Wert sollte die id eines Zielelements sein. Wenn diese Beziehung hergestellt ist, wird das Zielelement beeinflusst, wenn der Benutzer Interesse am Invoker zeigt (zum Beispiel durch Hover oder Fokussierung). Ein häufiges Anwendungsbeispiel ist das Anzeigen eines Popovers bei Hover oder Fokus. Wenn der Benutzer das Interesse verliert, stoppt der Effekt.
Wenn der Benutzer Interesse zeigt oder verliert, beginnt oder endet der zugehörige Effekt nicht sofort – der Browser fügt eine kurze Verzögerung hinzu (die je nach Browser variieren kann). Dies verhindert zum Beispiel, dass Preview Popovers sofort erscheinen, wenn der Benutzer über einen Link fährt, was auf einer linkreichen Seite störend und ablenkend sein könnte.
Die interest-delay Eigenschaft ermöglicht es Ihnen, diese Verzögerungen anzupassen. Sie können interest-delay verwenden, um die Verzögerung anzugeben, bevor der Interesse-Effekt beginnt (angegeben durch die interest-delay-start Eigenschaft) und die Verzögerung, bevor der Interesse-Effekt endet (angegeben durch die interest-delay-end Eigenschaft) in einer einzigen Deklaration.
Die interest-delay Eigenschaft kann einen oder zwei Werte haben. Diese Werte können das Schlüsselwort normal sein, welches die Standard-Browserverzögerung setzt, oder ein <time> Wert, der eine benutzerdefinierte Verzögerung festlegt. Wenn ein einzelner Wert angegeben wird, gilt er für beide interest-delay-start und interest-delay-end. Wenn zwei Werte angegeben werden, setzt der erste Wert interest-delay-start und der zweite Wert interest-delay-end.
Formale Definition
Wert in der Datenbank nicht gefunden!Formale Syntax
interest-delay =
<'interest-delay-start'>{1,2}
<interest-delay-start> =
normal |
<time>
Beispiele
Erstellen eines grundlegenden interest-delay Effekts
In diesem Beispiel demonstrieren wir, wie interest-delay das Verhalten von Interest Invokern beeinflusst.
HTML
Das Markup enthält ein <button>, ein <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 Absatz zum Zielelement. Der Absatz wird in ein Popover verwandelt, 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</code> of <code>1s 2s</code>
</label>
</form>
CSS
Im CSS definieren wir eine .delay Regel, die einen interest-delay Wert von 1s 2s auf jeden Interest Invoker anwendet, bei dem die delay Klasse gesetzt ist. Wir werden diese Klasse auf den <button> setzen, wenn die Checkbox über JavaScript aktiviert ist.
.delay {
interest-delay: 1s 2s;
}
JavaScript
In unserem Skript erhalten wir Referenzen auf den <button> und die Checkbox, dann erstellen wir einen Event-Listener, der die delay Klasse auf dem <button> umschaltet, wann immer sich der Wert der Checkbox ändert (wenn sie aktiviert oder deaktiviert wird).
const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
btn.classList.toggle("delay");
});
Ergebnis
Dies rendert wie folgt:
Versuchen Sie, Interesse an dem Button zu zeigen (zum Beispiel durch Hovern oder Fokussieren) und dann das Interesse zu verlieren, um zu beobachten, wie das Popover angezeigt und ausgeblendet wird. Standardmäßig wird das Popover nach einer sehr kurzen Verzögerung angezeigt und ausgeblendet.
Aktivieren Sie nun die Checkbox und versuchen Sie die gleichen Aktionen erneut. Dieses Mal sollte das Popover nach einer Verzögerung von 1s erscheinen, wenn Interesse gezeigt wird, und nach einer Verzögerung von 2s ausgeblendet werden, wenn das Interesse verloren geht.
Spezifikationen
| Specification |
|---|
| CSS Basic User Interface Module Level 4 # propdef-interest-delay |