CSS-псевдокласс `:interest-target`

:interest-target CSS псевдокласс обозначает целевой элемент, связанный с инициатором интереса, когда к этому инициатору проявлен интерес.

Синтаксис

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

Примеры

Выбор целевого элемента, связанного с инициатором интереса

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

HTML

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

<button interestfor="mytarget">Button</button>
<p id="mytarget">A paragraph</p>

CSS

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

body {
  margin: 10px;
}

button {
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 5px;
  background-color: #eeeeee;

  cursor: pointer;
}

p:interest-target {
  font-size: 1.5em;
  font-family: sans-serif;
  padding: 10px;
  background-color: hotpink;
  color: purple;
}

Результат

В результате отображается следующее:

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

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

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

См. также

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