`:interest-source` CSS pseudo-class

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.

Specifications

Browser compatibility

See also

• :interest-target
• Popover API
• Using interest invokers
• CSS selectors module