:interest-target

Syntax

css

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

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

HTML

Das Markup enthält einen <button> und einen <p>. Wir definieren den <button> als Interest Invoker, indem wir ihm das interestfor-Attribut geben, dessen Wert mit der id des <p>-Elements übereinstimmt und den Absatz so zum Ziel-Element macht.

html

<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 spezielle Menge an Stilen auf das <p>-Element anwenden wird, wenn Interesse im <button> gezeigt wird. Wir wenden auch einige andere Stile auf den <button> an, die der Kürze halber hier nicht gezeigt sind.

body {
  margin: 10px;
}

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

  cursor: pointer;
}

css

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

Ergebnis

Das wird wie folgt dargestellt:

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