CSS-Eigenschaft 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 Moment, wenn der Benutzer Interesse an einem Interest-Invoker-Element zeigt und dem Auslösen des interest-Events, sowie die Verzögerung zwischen dem Verlust des Interesses des Benutzers und dem Auslösen des loseinterest-Events.
Bestandeigenschaften
Diese 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 Steuerungselement wie ein <a> oder <button> kann als Interest-Invoker festgelegt werden, indem ihm das interestfor-Attribut zugewiesen wird. Sein Wert sollte die id eines Zielelements sein. Wenn diese Beziehung besteht, wird das Zielelement beeinflusst, wenn der Benutzer "Interesse zeigt" am Invoker (zum Beispiel durch Überfahren oder Fokussieren). Ein häufiges Einsatzszenario 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, startet oder stoppt der zugehörige Effekt nicht sofort — der Browser fügt eine kurze Verzögerung hinzu (die je nach Browser variieren kann). Dies verhindert, dass Vorschau-Popovers beispielsweise sofort erscheinen, wenn der Benutzer über einen Link fährt, was auf einer Seite mit vielen Links störend 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 festzulegen, bevor der Interesse-Effekt beginnt (festgelegt durch die Eigenschaft interest-delay-start) und die Verzögerung, bevor der Interesse-Effekt endet (festgelegt durch die Eigenschaft interest-delay-end) in einer einzigen Deklaration.
Die interest-delay-Eigenschaft kann einen oder zwei Werte annehmen. Diese Werte können das Schlüsselwort normal sein, das die Standardbrowserverzögerung festlegt, oder ein <time>-Wert, der eine benutzerdefinierte Verzögerung festlegt.
Wenn ein einzelner Wert angegeben wird, gilt er sowohl für interest-delay-start als auch für interest-delay-end. Wenn zwei Werte angegeben werden, setzt der erste Wert interest-delay-start, und der zweite Wert setzt interest-delay-end.
Formale Definition
| Anfangswert | wie die jeweiligen Kurzschreibweisen:
|
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Ja |
| Berechneter Wert | wie die jeweiligen Kurzschreibweisen:
|
| Animationstyp | wie die jeweiligen Kurzschreibweisen:
|
Formale Syntax
interest-delay =
<'interest-delay-start'>{1,2}
<interest-delay-start> =
normal |
<time>
Beispiele
Erstellung eines grundlegenden interest-delay-Effekts
In diesem Beispiel zeigen wir, wie interest-delay das Verhalten von Interest-Invoker beeinflusst.
HTML
Das Markup umfasst einen <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 durch das popover-Attribut in ein Popover umgewandelt, das ihn anfänglich versteckt.
<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, dem die delay-Klasse zugewiesen ist. Wir werden diese Klasse auf den <button> setzen, wenn das Kontrollkästchen mit JavaScript aktiviert ist.
.delay {
interest-delay: 1s 2s;
}
JavaScript
In unserem Skript erhalten wir Referenzen auf den <button> und das Kontrollkästchen und erstellen dann einen Event-Listener, der die delay-Klasse auf dem <button> umschaltet, wann immer sich der Wert des Kontrollkästchens ändert (wenn es aktiviert oder deaktiviert ist).
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, indem Sie ihn überfahren oder fokussieren) und dann das Interesse zu verlieren, um das Popover beim Anzeigen und Verbergen zu beobachten. Standardmäßig zeigt das Popover und verbirgt sich nach einer sehr kurzen Verzögerung.
Aktivieren Sie jetzt das Kontrollkästchen und probieren Sie die gleichen Aktionen erneut. Dieses Mal sollte das Popover nach einer Verzögerung von 1s erscheinen, wenn das Interesse gezeigt wird, und nach einer Verzögerung von 2s verschwinden, wenn das Interesse verloren geht.
Spezifikationen
| Spezifikation |
|---|
| CSS Basic User Interface Module Level 4 # propdef-interest-delay |