:interest-source

Syntaxe

:interest-source {
  /* ... */
}

Exemples

Sélectionner un élément invocateur d'intérêt

Dans cet exemple, nous montrons comment :interest-source peut être utilisé pour appliquer des styles à un élément invocateur d'intérêt lorsque l'intérêt est affiché sur celui-ci.

HTML

Le balisage inclut un bouton (<button>) et un paragraphe (<p>). Nous définissons le <button> comme un invocateur d'intérêt en lui donnant l'attribut interestfor dont la valeur correspond à un id de l'élément <p>, faisant du paragraphe l'élément cible. Le paragraphe est transformé en fenêtre contextuelle en lui donnant l'attribut popover, ce qui le cache initialement.

<button interestfor="mafenetrecontextuelle">Bouton</button>
<p id="mafenetrecontextuelle" popover>Une info-bulle au survol</p>

CSS

Dans le CSS, nous définissons une règle avec un sélecteur :interest-source pour appliquer une combinaison spécifique de background-color et color au <button> lorsque l'intérêt est affiché sur celui-ci. Nous appliquons également d'autres styles au <button>, qui sont cachés pour des raisons de concision.

button {
  margin: 10px;
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  font-size: 1.5em;
  background-color: #eeeeee;

  cursor: pointer;
}

button:interest-source {
  background-color: hotpink;
  color: purple;
}

Résultat

Ça s'affiche comme suit :

Essayez de montrer de l'intérêt pour le bouton (par exemple, en le survolant ou en lui donnant la sélection), et notez comment la combinaison de couleurs hotpink et purple est appliquée uniquement lorsque l'intérêt est affiché.

Spécifications

Compatibilité des navigateurs

Voir aussi

• La pseudo-classe :interest-target
• L'API Popover
• Utiliser les invocateurs d'intérêt
• Le module de sélecteurs CSS