`:interest-source` 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-source CSS Pseudoklasse repräsentiert ein Interest Invoker-Element, wenn Interesse daran gezeigt wird.

Syntax

css

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

Beispiele

Auswahl eines Interest Invoker-Elements

In diesem Beispiel demonstrieren wir, wie :interest-source verwendet werden kann, um einem Interest Invoker-Element Stile zuzuweisen, wenn Interesse daran gezeigt wird.

HTML

Das Markup umfasst ein <button> und ein <p>. Wir spezifizieren das <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. Der Absatz wird durch das popover-Attribut in ein Popover verwandelt, das ihn zunächst verbirgt.

html

<button interestfor="mypopover">Button</button>
<p id="mypopover" popover>A hover tooltip</p>

CSS

Im CSS spezifizieren wir eine Regel mit einem :interest-source-Selektor, um eine spezifische Kombination aus background-color und color auf das <button> anzuwenden, wenn Interesse daran gezeigt wird. Wir wenden auch einige andere Stile auf das <button> an, die der Kürze halber ausgeblendet sind.

button {
  margin: 10px;
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  font-size: 1.5em;
  background-color: #eeeeee;

  cursor: pointer;
}

css

button:interest-source {
  background-color: hotpink;
  color: purple;
}

Ergebnis

Dies wird folgendermaßen gerendert:

Versuchen Sie, Interesse am Button zu zeigen (zum Beispiel durch Hovern oder Fokussieren), und beachten Sie, wie die hotpink- und purple-Farbkombination nur angewendet wird, wenn Interesse gezeigt wird.