`:interest-target` CSS-Pseudoklasse

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die :interest-target CSS Pseudoklasse repräsentiert das Ziel-Element, das mit einem Interest Invoker verknüpft ist, wenn Interesse an diesem Invoker gezeigt wird.

Syntax

css

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

Beispiele

Auswählen des Ziel-Elements eines Interest Invokers

In diesem Beispiel zeigen 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 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 Ziel-Element wird.

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 einen speziellen Satz 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 ausgeblendet haben.

body {
  margin: 10px;
}

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

  cursor: pointer;
}

css

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

Ergebnis

Dies wird wie folgt dargestellt:

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