:interest-source CSS-Pseudoklasse

Die :interest-source CSS Pseudoklasse repräsentiert ein Interest Invoker-Element, wenn Interesse daran gezeigt wird.

Syntax

: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.

<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;
}

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.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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