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

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

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

Синтаксис

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

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

Значения

Это свойство задаётся одним значением <time> или ключевым словом normal:

normal

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

<time>

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

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

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

interest-delay-end = 
  normal |
  <time>

Примеры

Создание базового эффекта interest-delay-end

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

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

CSS

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

.delay {
  interest-delay-end: 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
• Popover API
• Использование инициаторов интереса
• Модуль базового пользовательского интерфейса CSS