Поведение при наведении мыши

Библиотека Noty позволяет создавать уведомления с гибкой настройкой поведения при взаимодействии пользователя с ними. Одним из ключевых аспектов является управление событиями наведения мыши (hover) и ухода курсора (mouseleave). Эти события дают возможность контролировать автоматическое скрытие уведомлений, а также изменять их визуальное представление или выполнять дополнительные действия.

В Noty доступны следующие основные свойства и методы, связанные с поведением при наведении:

  • timeout — время, через которое уведомление автоматически исчезнет.
  • closeWith — массив способов закрытия уведомления (например, 'click', 'hover').
  • onHover — функция обратного вызова при наведении курсора на уведомление.
  • onMouseLeave — функция обратного вызова при уходе курсора с уведомления.

Управление таймером авто-скрытия

При наведении мыши на уведомление часто требуется приостановить автоматическое скрытие. Это особенно важно для сообщений, содержащих важную информацию, чтобы пользователь успел ознакомиться с ней. Для реализации такого поведения используется метод stop объекта Noty:

let notification = new Noty({
    text: 'Сохранение данных прошло успешно',
    timeout: 5000,
    callbacks: {
        onHover: function() {
            this.stop(); // Останавливает таймер скрытия
        },
        onMouseLeave: function() {
            this.resume(); // Возобновляет таймер скрытия
        }
    }
}).show();

В этом примере:

  • stop() полностью приостанавливает обратный отсчет таймера timeout.
  • resume() продолжает отсчет с того момента, где он был остановлен.

Это позволяет гибко управлять продолжительностью отображения уведомлений в зависимости от активности пользователя.

Изменение визуального состояния при наведении

Noty поддерживает изменение CSS-классов уведомления при наведении курсора. Для этого можно использовать стандартные события DOM:

let notification = new Noty({
    text: 'Новая версия доступна!',
    timeout: 4000
}).show();

notification.barDom.addEventListener('mouseenter', () => {
    notification.barDom.classList.add('hovered');
});

notification.barDom.addEventListener('mouseleave', () => {
    notification.barDom.classList.remove('hovered');
});

Здесь barDom — это основной DOM-элемент уведомления. Добавление класса hovered позволяет изменять фон, тени, анимацию или другие стили через CSS:

.noty_bar.hovered {
    background-color: #f0f0f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Настройка поведения закрытия по наведению

Иногда требуется, чтобы уведомление закрывалось при наведении мыши. Для этого используется опция closeWith:

new Noty({
    text: 'Вы уверены, что хотите удалить элемент?',
    closeWith: ['hover']
}).show();

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

Комбинирование hover с другими событиями

Noty поддерживает полноценную систему обратных вызовов (callbacks) для всех этапов жизненного цикла уведомления. При этом события наведения можно комбинировать с другими событиями:

  • onShow — при отображении уведомления.
  • onClose — при закрытии.
  • onClick — при клике по уведомлению.

Пример комбинированного использования:

new Noty({
    text: 'Сообщение об ошибке',
    timeout: 6000,
    callbacks: {
        onHover: function() {
            this.stop();
            this.barDom.style.backgroundColor = '#ffdede';
        },
        onMouseLeave: function() {
            this.resume();
            this.barDom.style.backgroundColor = '';
        },
        onClick: function() {
            this.close();
        }
    }
}).show();

В данном примере при наведении уведомление подсвечивается, таймер остановлен, а при уходе курсора — возвращается исходное состояние и возобновляется скрытие. Клик по уведомлению закрывает его немедленно.

Практические рекомендации

  • Для длительных уведомлений рекомендуется останавливать таймер при наведении.
  • Изменение визуального состояния улучшает UX и делает взаимодействие с уведомлением более заметным.
  • Использование комбинации hover + click или hover + timeout позволяет гибко настраивать поведение уведомлений под разные сценарии.
  • Всегда проверять совместимость с анимациями, если уведомление использует эффекты появления/исчезновения (animation: 'fade', animation: 'slide'), чтобы hover не нарушал плавность.

Поведение при наведении мыши в Noty — один из мощнейших инструментов для управления уведомлениями, позволяющий создавать интуитивно понятный и динамичный интерфейс.

Оглавление