:interest-target

Syntaxe

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

Exemples

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

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

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.

<button interestfor="macible">Bouton</button>
<p id="macible">Un paragraphe</p>

CSS

Dans le CSS, nous définissons une règle avec un sélecteur :interest-target, qui appliquera un ensemble spécifique de styles à l'élément <p> lorsque l'intérêt est affiché sur le <button>. Nous appliquons également d'autres styles au <button>, qui sont cachés pour des raisons de concision.

body {
  margin: 10px;
}

button {
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background-color: #eeeeee;

  cursor: pointer;
}

p:interest-target {
  font-size: 1.5em;
  font-family: sans-serif;
  padding: 10px;
  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 le mettant au focus), et notez comment cela entraîne l'application des styles précédemment définis au paragraphe.

Spécifications

Compatibilité des navigateurs

Voir aussi

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