:hover | JavaScript

• Элемент меняет свой цвет при нажатии
• Координаты курсора мышки внутри блока

События onmouseenter и onmouseleave

Не срабатывает на потомках.

<style>
[id^="raz"] {
  padding: 3em 30%;
  background: green;
}
[id^="raz"] div {
  min-height: 4em;
  background: blue;
}
</style>

<div id="raz0">
  <div></div>
</div>

<script>
  var raz0 = document.getElementById('raz0');
  raz0.onmouseenter = function() { // курсор зашёл на элемент-родитель [mozilla.org]
    this.style.background = 'red';
  }
  raz0.onmouseleave = function() { // курсор ушёл с элемента-родителя
    this.style.background = 'green';
  }
</script>

onmouseover и onmouseout

<style>
[id^="raz"] {
  padding: 3em 30%;
  background: green;
}
[id^="raz"] div {
  min-height: 4em;
  background: blue;
}
</style>

<div id="raz1">
  <div></div>
</div>

<script>
  var raz1 = document.getElementById('raz1');
  raz1.onmouseover = function() {
    this.style.background = 'red';
  }
  raz1.onmouseout = function(e) {
    this.style.background = 'green';
    this.children[0].style.background = (e.relatedTarget == this.children[0] ? 'yellow' : '');
  }
</script>

onmouseover — скрипт срабатывает, когда курсор мышки наведён на элемент.

onmouseout — скрипт срабатывает, когда курсор мышки уходит за пределы элемента.

document.querySelectorAll и :hover

Также проверить наведён ли курсор мышки на элемент div можно благодаря document.querySelectorAll

<style>
#div {
  background: green;
  height: 25em;
}
</style>

<div id="div"></div>

<script>
window.onmousemove = function() {
  var div = document.querySelector('#div');
  div.style.background = document.querySelectorAll('#div:hover').length ? 'red' : 'green';
}
</script>

onmousemove — скрипт срабатывает, когда курсор мышки двигается в пределах элемента.

document.querySelectorAll('#div:hover').length — если есть хотя бы один #div:hover.