События 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.
2 комментария: