:interest-target

Syntax

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

Beispiele

Auswahl des Zielelements, 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 Interesse an dem Invoker angezeigt wird.

HTML

Das Markup umfasst ein <button> und ein <p>. Wir geben dem <button> das Attribut interestfor, dessen Wert mit der id des <p>-Elements übereinstimmt, und machen damit den Absatz zum Zielelement.

<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 anwendet, wenn Interesse im <button> angezeigt wird. Außerdem wenden wir einige andere Stile auf den <button> an, die wir der Kürze halber ausgelassen haben.

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;
}

Ergebnis

Das Ergebnis wird wie folgt dargestellt:

Versuchen Sie, Interesse am Button zu zeigen (zum Beispiel durch darüber Hovern oder Fokussieren), und beachten Sie, wie dies dazu führt, dass die zuvor gezeigten Stile auf den Absatz angewendet werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• :interest-source
• Popover API
• Using interest invokers
• CSS selectors Modul