:interest-source

Syntax

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

Examples

Selecting an interest source element

In this example, we demonstrate how :interest-source can be used to apply styles to an interest invoker element only when interest is being shown in it.

HTML

We include a <button> and a <p>. We specify the <button> as an interest invoker by giving it an interestfor attribute; its value is given as the id of the <p> element, therefore the paragraph is the invoker target. The paragraph is made into a popover by giving it a popover attribute, causing it to be initially hidden.

<button interestfor="mypopover">A button</button>
<p id="mypopover" popover>A hover toolip</p>

CSS

In the CSS, we specify a rule with an :interest-source selector, which will apply a specific combination of background-color and color to the <button> when interest is shown in it. We also apply some other styles to the <button>, which we've hidden for brevity.

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

Result

This renders as follows:

Try showing interest in the button (for example by hovering or focusing it), and note how the pink and purple color combination is only applied when interest is being shown.

Specifications

Browser compatibility

See also

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