:interest-target

Syntax

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

Beispiele

Das Zielelement auswählen, das mit einem Interest Invoker verbunden ist

In diesem Beispiel zeigen wir, wie :interest-target verwendet werden kann, um Stile auf das Zielelement eines Interest Invoker-Elements anzuwenden, wenn das Interesse an dem Invoker gezeigt wird.

HTML

Das Markup enthält ein <button> und ein <p>. Wir spezifizieren den <button> als Interest Invoker, indem wir ihm das interestfor Attribut geben, dessen Wert mit der id des <p> Elements übereinstimmt, wodurch der Absatz zum Zielelement wird.

<button interestfor="mytarget">Button</button>
<p id="mytarget">A paragraph</p>

CSS

Im CSS spezifizieren wir eine Regel mit einem :interest-target Selektor, der eine spezifische Menge von Stilen auf das <p> Element anwenden wird, wenn Interesse am <button> gezeigt wird. Wir wenden auch einige andere Stile auf den <button> an, die wir der Kürze halber weggelassen haben.

body {
  margin: 10px;
}

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

  cursor: pointer;
}

p:interest-target {
  font-size: 1.5em;
  font-family: sans-serif;
  padding: 10px;
  background-color: hotpink;
  color: purple;
}

Ergebnis

Das Ergebnis sieht wie folgt aus:

Versuchen Sie, Interesse am Button zu zeigen (zum Beispiel durch Schweben oder Fokussieren), und beachten Sie, wie die zuvor gezeigten Stile auf den Absatz angewendet werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• :interest-source
• Popover API
• Verwendung von Interest Invokers
• CSS-Selektoren Modul