:interest-source

Syntax

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

Beispiele

Auswahl eines Interest Invoker-Elements

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

HTML

Das Markup enthält 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 Paragraph zum Ziel-Element wird. Der Paragraph wird zu einem Popover, indem wir ihm das popover Attribut geben, welches ihn zunächst ausblendet.

<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 nicht gezeigt werden.

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 wird wie folgt dargestellt:

Versuchen Sie, Interesse am Button zu zeigen (zum Beispiel durch Darüberfahren oder Fokussieren), 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