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

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

Составные свойства

Это сокращённое свойство для следующих свойств:

• interest-delay-start
• interest-delay-end

Синтаксис

/* Single value */
interest-delay: normal;
interest-delay: 2s;
interest-delay: 250ms;

/* Two values */
interest-delay: 1s normal;
interest-delay: 0s 500ms;

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

Значения

Свойство interest-delay принимает одно или два значения. Первое значение задаёт задержку перед проявлением интереса (interest-delay-start); второе значение, если оно указано, задаёт задержку перед потерей интереса (interest-delay-end). Каждое значение может быть ключевым словом normal или значением <time>:

normal

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

<time>

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

Описание

Элемент управления, например <a> или <button>, можно назначить инициатором интереса, задав ему атрибут interestfor. Его значением должен быть id целевого элемента. При установлении этой связи целевой элемент реагирует на то, что пользователь «проявляет интерес» к инициатору (например, наводит на него указатель или переводит на него фокус). Один из распространённых вариантов использования — отображение всплывающей панели при наведении указателя или переводе фокуса. Когда пользователь «теряет интерес», эффект прекращается.

Когда пользователь проявляет или теряет интерес, связанный эффект не запускается и не прекращается сразу — браузер добавляет небольшую задержку (которая может различаться в разных браузерах). Благодаря этому, например, предварительные всплывающие панели не появляются сразу при наведении указателя на ссылку, что может раздражать и отвлекать на страницах с большим количеством ссылок.

Свойство interest-delay позволяет настроить эти задержки. С помощью interest-delay можно задать в одном объявлении задержку перед запуском эффекта интереса (задаётся свойством interest-delay-start) и задержку перед завершением эффекта интереса (задаётся свойством interest-delay-end).

Свойство interest-delay может принимать одно или два значения. Этими значениями могут быть ключевое слово normal, задающее задержку браузера по умолчанию, или значение <time>, задающее пользовательскую задержку. Если указано одно значение, оно применяется и к interest-delay-start, и к interest-delay-end. Если указаны два значения, первое задаёт interest-delay-start, а второе — interest-delay-end.

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

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

interest-delay = 
  <'interest-delay-start'>{1,2}

Примеры

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

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

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</code> of <code>1s 2s</code>
  </label>
</form>

CSS

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

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

JavaScript

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

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

Результат

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

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

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

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

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

См. также

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