Как сделать функцию на чистом JS, срабатывающую при наведении на HTML блок?

Question

[CoCoCoder]

Есть множество HTML блоков,при наведении на которые,я хочу изменять текст.К примеру,
есть 4 кнопки:
1
2
3
4
,я хочу,чтобы при наведении на кнопку вышло "Вы навели на кнопку: (number - в нашем случае) 1". Как это сделать на чистом JS , без jQuery и прочего?

Answer 1

[San Taganeiro]

Попробуй почитать про mouseover/out, mouseenter/leave

Comments

[CoCoCoder]

Спасибо!

Answer 2

[WapSter]

https://codepen.io/wapster92/pen/bGGBWgR

Answer 3

[Сергей c0re]

почитай про события в Javascript
Введение в браузерные события
Выразительный JavaScript: Обработка событий
и т.п.

document.querySelectorAll("button").forEach(el => el.addEventListener("mouseover", e => alert("Вы навели на кнопку: "+e.target.textContent)))

Answer 4

[h88p]

document.querySelectorAll('.main-menu__item').forEach(w => {
	w.addEventListener('mouseenter', () => {
		console.log(`Вы навелись на пункт меню "${w.innerText}"`)
	})
})