: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, wodurch der Absatz das Zielelement wird. Der Absatz wird in ein Popover verwandelt, indem ihm das popover Attribut gegeben wird, das ihn zunächst verbirgt.

<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 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 aus Gründen der Kürze ausgelassen 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

Das Ergebnis sieht wie folgt aus:

Versuchen Sie, Interesse am Button zu zeigen (zum Beispiel, indem Sie darüber fahren oder ihn fokussieren), und beachten Sie, wie die hotpink und purple Farbkombination nur angewendet wird, wenn Interesse gezeigt wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• :interest-target
• Popover API
• Verwendung von Interest Invokers
• CSS Selektoren Modul