Событие наведения мыши не распространяется как ожидалось (эффект добавления кнопки)

На чтение 4 мин Опубликовано 11.10.2024

Содержание

Вопрос или проблема
Ответ или решение
HTML
CSS
JavaScript
Объяснение
Итоги

Вопрос или проблема

Я хотел сделать простой эффект подсветки на кнопке в месте, где вы наводите курсор. Если кто-то знает способ сделать это без JavaScript, было бы даже лучше (нашел один странный пост об этом), но я пытался сделать это с обработчиком событий для mouseover.

Я перемещаю вложенный div, когда наводят курсор на кнопку, но на моем сайте событие не распространяется, когда курсор находится над дочерним элементом, а в этой простой реализации это работает только при наведении на дочерний элемент. Мне кажется, что я делаю что-то действительно неправильно, но я не вижу, что.

var button = document.querySelector('.button');
var highlightDiv = document.querySelector('.highlight');

button.addEventListener('mouseover', (e) => {
    const x = (e.pageX - button.offsetLeft - 300 / 2) + 15;
    const y = (e.pageY - button.offsetTop - 100 / 2) + 15;
    highlightDiv.style.setProperty('--x', `${x}px`);
    highlightDiv.style.setProperty('--y', `${y}px`);
});

.button {
  border: 1px solid black;
  width: 400px;
  height: 70px;
}

.highlight {
  height: 40px;
  width: 40px;
  background: radial-gradient(#e66465, #9198e5);
  transform: translate(var(--x), var(--y));
}

<button class="button">
  Текст кнопки
  <div class="highlight"></div>  
</button>

</div><div class="s-prose js-post-body" itemprop="text">

Давайте используем радиальный градиент, центрированный на позиции мыши.

const button = document.querySelector('.button');

button.addEventListener('mousemove', (e) => {
  button.style.setProperty('--x', `${e.offsetX}px`);
  button.style.setProperty('--y', `${e.offsetY}px`);
});

.button:hover {
  background-image: radial-gradient(at var(--x) var(--y), #e66465, #9198e5);
  cursor: pointer;
}

.button {
  border: 1px solid black;
  width: 400px;
  height: 70px;
}

<button class="button">
  Текст кнопки
  <div class="highlight"></div>  
</button>

Вот более красивый пример. Создан с помощью ИИ.

const button = document.getElementById('radialButton');

button.addEventListener('mousemove', (e) => {
  button.style.setProperty('--x', `${e.offsetX}px`);
  button.style.setProperty('--y', `${e.offsetY}px`);
});

#radialButton {
  position: relative;
  padding: 20px 40px;
  font-size: 18px;
  cursor: pointer;
  background-color: #3984ff;
  color: white;
  border: none;
  border-radius: 5px;
  transition: background-image 0.3s;
}

#radialButton:hover {
  background-image: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 50%
  ),
  linear-gradient(#3984ff, #3984ff);
}

<button id="radialButton">Наведи на меня</button>

Ответ или решение

Для реализации эффекта подсветки кнопки с центром на месте, где наведена мышь, можно использовать JavaScript для обработки события mousemove. Это позволит динамически изменять положение градиентного фона кнопки в зависимости от координат курсора. Ниже представлена полная реализация этого подхода.

HTML

<button id="radialButton">Наведи на меня</button>

CSS

#radialButton {
  position: relative;
  padding: 20px 40px;
  font-size: 18px;
  cursor: pointer;
  background-color: #3984ff;
  color: white;
  border: none;
  border-radius: 5px;
  transition: background-image 0.3s; /* Плавный переход фона */
}

#radialButton:hover {
  background-image: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%),
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0) 50%
  ),
  linear-gradient(#3984ff, #3984ff); /* Основной цвет кнопки */
}

JavaScript

const button = document.getElementById('radialButton');

button.addEventListener('mousemove', (e) => {
  // Устанавливаем CSS переменные для координат курсора
  button.style.setProperty('--x', `${e.offsetX}px`);
  button.style.setProperty('--y', `${e.offsetY}px`);
});

Объяснение

HTML: Создаём кнопку с id="radialButton", на которую будем навивать мышь.
CSS:
- Кнопка имеет плавный переход фона при наведении.
- На кнопке при наведении задаётся фоновый градиент, который центрируется в зависимости от положения курсора (переменные --x и --y).
JavaScript:
- Мы добавляем обработчик события mousemove на кнопку. Этот обработчик обновляет CSS-переменные --x и --y на основе текущих координат курсора относительно кнопки, позволяя градиентному фону следовать за движением мыши.

Итоги

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