Псевдокласс CSS `:interest-source`

:interest-source CSS псевдокласс представляет элемент — инициатор интереса, когда к нему проявляется интерес.

Синтаксис

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

Примеры

Выбор элемента — инициатора интереса

В этом примере показано, как :interest-source можно использовать для применения стилей к элементу — инициатору интереса, когда к нему проявляется интерес.

HTML

Разметка содержит <button> и <p>. Мы указываем <button> в качестве инициатора интереса, добавляя к нему атрибут interestfor со значением, совпадающим с id элемента <p>, тем самым делая абзац целевым элементом. Абзац превращается во всплывающую подсказку благодаря атрибуту popover, который изначально скрывает его.

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

CSS

В CSS мы задаём правило с селектором :interest-source, чтобы применить определённое сочетание background-color и color к <button>, когда к нему проявляется интерес. Мы также применяем другие стили к <button>, которые не приводятся для краткости.

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

Результат

Результат выглядит следующим образом:

Попробуйте проявить интерес к кнопке (например, наведя на неё указатель или переместив на неё фокус) и обратите внимание, что сочетание цветов hotpink и purple применяется только тогда, когда проявляется интерес.

Спецификации

Совместимость с браузерами

См. также

• :interest-target
• Popover API
• Использование инициаторов интереса
• модуль CSS-селекторов