interest-delay-end

Syntaxe

/* Mot-clé ou délai personnalisé */
interest-delay-end: normal;
interest-delay-end: 2s;
interest-delay-end: 250ms;

/* Valeurs globales */
interest-delay-end: inherit;
interest-delay-end: initial;
interest-delay-end: revert;
interest-delay-end: revert-layer;
interest-delay-end: unset;

Valeurs

normal

Définit le délai par défaut du navigateur. Il s'agit de la valeur initiale.

<time>

Définit le délai à une durée spécifique. La valeur doit être positive, sinon la propriété devient invalide.

Définition formelle

Syntaxe formelle

interest-delay-end = 
  normal  |
  <time>  

Exemples

Créer un effet interest-delay-end simple

Dans cet exemple, nous montrons comment interest-delay-end affecte le comportement d'un invocateur d'intérêt.

HTML

Le balisage inclut un <button>, un <p> et un <input> de type checkbox. Nous définissons le <button> comme invocateur d'intérêt en lui donnant l'attribut interestfor dont la valeur correspond à l'id de l'élément <p>. Cela fait du paragraphe l'élément cible. Le paragraphe devient une fenêtre contextuelle grâce à l'attribut popover, qui le masque initialement.

<button interestfor="mypopover">Bouton</button>
<p id="mypopover" popover>Info-bulle au survol</p>
<form>
  <input type="checkbox" id="apply-delay" />
  <label for="apply-delay">
    Appliquer un <code>interest-delay-end</code> de <code>2s</code>
  </label>
</form>

CSS

Dans le CSS, nous définissons une règle avec le sélecteur .delay qui applique une valeur interest-delay-end de 2s à tout invocateur d'intérêt auquel la classe delay est appliquée. Nous appliquerons cette classe au <button> lorsque la case à cocher sera cochée, avec JavaScript.

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

JavaScript

Dans notre script, nous récupérons les références du <button> et de la case à cocher, puis nous créons un écouteur d'évènement qui bascule la classe delay sur le <button> à chaque changement de valeur de la case (cochée ou décochée).

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

Résultat

Ceci s'affiche ainsi :

Essayez de montrer de l'intérêt pour le bouton (par exemple, en le survolant ou en le sélectionnant), puis de cesser de montrer de l'intérêt pour observer l'affichage et la disparition de la fenêtre contextuelle. Par défaut, la fenêtre contextuelle s'affiche et disparaît après un très court délai.

Cochez maintenant la case et refaites les mêmes actions. Cette fois, le délai entre le fait de montrer de l'intérêt et l'apparition de la fenêtre contextuelle n'est pas modifié, mais le délai entre le fait de cesser de montrer de l'intérêt et la disparition de la fenêtre contextuelle doit être augmenté à 2s.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés interest-delay-start, interest-delay
• L'API Popover
• Utiliser les invocateurs d'intérêt
• Le module d'interface utilisateur de base CSS