CSS-свойство `interest-delay-start`

CSS-свойство interest-delay-start задаёт задержку между проявлением пользователем интереса к элементу — инициатору интереса — и срабатыванием события interest.

Свойства interest-delay-start и interest-delay-end можно задать с помощью сокращённого свойства interest-delay.

Синтаксис

/* Keyword or custom delay */
interest-delay-start: normal;
interest-delay-start: 2s;
interest-delay-start: 250ms;

/* Global values */
interest-delay-start: inherit;
interest-delay-start: initial;
interest-delay-start: revert;
interest-delay-start: revert-layer;
interest-delay-start: unset;

Значения

Для этого свойства указывается одно значение <time> или ключевое слово normal:

normal

Задаёт задержку по умолчанию для браузера. Это начальное значение.

<time>

Задаёт задержку определённой длительности. Значение должно быть положительным, иначе свойство становится недопустимым.

Формальное определение

Формальный синтаксис

interest-delay-start = 
  normal |
  <time>

Примеры

Создание простого эффекта interest-delay-start

В этом примере показано, как interest-delay-start влияет на поведение инициатора интереса.

HTML

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

<button interestfor="mypopover">Button</button>
<p id="mypopover" popover>Hover tooltip</p>
<form>
  <input type="checkbox" id="apply-delay" />
  <label for="apply-delay">
    Apply an <code>interest-delay-start</code> of <code>2s</code>
  </label>
</form>

CSS

В CSS мы задаём правило с селектором .delay, которое применяет значение 2s свойства interest-delay-start ко всем инициаторам интереса, которым задан класс delay. С помощью JavaScript мы добавим этот класс к <button>, когда флажок будет отмечен.

.delay {
  interest-delay-start: 2s;
}

JavaScript

В скрипте мы получаем ссылки на <button> и флажок, а затем создаём обработчик события, который переключает класс delay у <button> при каждом изменении значения флажка (при его установке или снятии).

const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
  btn.classList.toggle("delay");
});

Результат

Результат выглядит так:

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

Теперь установите флажок и повторите те же действия. На этот раз при проявлении интереса всплывающее окно должно появиться через 2s. Задержка после того, как интерес пропал, не изменится.

Удаление interest-delay-start после проявления интереса

В этом примере показано, как удалить interest-delay-start у нескольких инициаторов интереса после того, как интерес был проявлен к одному из них.

Это полезный приём. Если бы всплывающее окно появлялось сразу при проявлении интереса к любому инициатору, это отвлекало бы пользователей и раздражало их. Поэтому браузеры по умолчанию добавляют небольшую задержку (подробнее см. в описании interest-delay). Однако после того, как пользователь проявил интерес к одному инициатору, удобно позволить ему быстро перемещаться между другими инициаторами без задержки.

HTML

Разметка включает три элемента <button>, помещённых в абзац с классом container, а также ещё один абзац, превращённый во всплывающее окно с помощью атрибута popover. Все три кнопки настроены как инициаторы интереса и ссылаются на всплывающее окно как на целевой элемент с помощью атрибута interestfor.

<p class="container">
  <button interestfor="mypopover">Button 1</button>
  <button interestfor="mypopover">Button 2</button>
  <button interestfor="mypopover">Button 3</button>
</p>
<p id="mypopover" popover>Hover tooltip</p>

CSS

В CSS мы применяем к кнопкам значение 1s свойства interest-delay-start, а затем размещаем всплывающее окно под кнопкой, к которой проявлен интерес, задавая для него значение bottom свойства position-area (подробнее см. в разделе Позиционирование всплывающего окна относительно якоря).

button {
  interest-delay-start: 1s;
}

#mypopover {
  position-area: bottom;
}

Наконец, мы объединяем псевдокласс :interest-source с псевдоклассом :has(), чтобы применить interest-delay-start: 0s ко всем кнопкам внутри абзаца, но только если в абзаце есть кнопка, к которой проявлен интерес (то есть она соответствует селектору button:interest-source).

.container:has(button:interest-source) button {
  interest-delay-start: 0s;
}

Результат

Результат выглядит так:

Попробуйте проявить интерес к любой кнопке и обратите внимание: если сразу после этого проявить интерес к другой кнопке, всплывающее окно появится без задержки. Если перестать проявлять интерес к кнопкам, а затем начать снова, исходная задержка вернётся.

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

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

См. также

• interest-delay-end, interest-delay
• Popover API
• Использование инициаторов интереса
• Модуль базового пользовательского интерфейса CSS