:interest-source

Syntax

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

Beispiele

Auswahl eines Interest-Invoker-Elements

In diesem Beispiel zeigen wir, wie :interest-source verwendet werden kann, um Stile auf ein Interest-Invoker-Element anzuwenden, 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 und dadurch den Absatz zum Zielelement macht. Der Absatz wird in ein Popover umgewandelt, indem ihm das popover Attribut gegeben wird, welches es anfänglich versteckt.

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

CSS

Im CSS spezifizieren wir eine Regel mit einem :interest-source Selektor, um eine spezifische Kombination von 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 #ddd;
  border-radius: 5px;
  font-size: 1.5em;
  background-color: #eee;

  cursor: pointer;
}

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

Ergebnis

Dies wird wie folgt gerendert:

Versuchen Sie, Interesse am Button zu zeigen (zum Beispiel durch Hover oder Fokus), und beachten Sie, wie die hotpink und purple Farbgebung nur angewendet wird, wenn Interesse gezeigt wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• :interest-target
• Popover API
• Using interest invokers
• CSS-Selektoren Modul