css pseudo class
`:interest-source` CSS pseudo-class
Limited availability
The :interest-source CSS pseudo-class represents an interest invoker element when interest is shown on it.
Syntax
:interest-source {
/* ... */
}
Examples
Selecting an interest invoker element
In this example, we demonstrate how :interest-source can be used to apply styles to an interest invoker element when interest is shown on it.
HTML
The markup includes a <button> and a <p>. We specify the <button> as an interest invoker by giving it the interestfor attribute whose value matches the id of the <p> element, making the paragraph the target element. The paragraph is turned into a popover by giving it the popover attribute, which hides it initially.
<button interestfor="mypopover">Button</button>
<p id="mypopover" popover>A hover tooltip</p>
CSS
In the CSS, we specify a rule with an :interest-source selector to apply a specific combination of background-color and color to the <button> when interest is shown on it. We also apply some other styles to the <button>, which are hidden for brevity.
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;
}
Result
This renders as follows:
Try showing interest in the button (for example, by hovering or focusing it), and note how the hotpink and purple color combination is applied only when interest is shown.