События onmouseover и onmouseout в javascript и jQuery

Использование событий onmouseover и onmouseout во многих случаях можно заменить CSS стилями, но иногда требуется на javascript отследить действие курсора над одним элементом и совершить в этот момент действие с другим другим объектом. Разберем на простых примерах как это реализовать.

• «onmouseover» — срабатывает при заходе курсора на элемент;
• «onmouseout» — срабатывает при уходе курсора с элемента.

Самое простое, это создать эти события внутри тега:

<span onmouseover="document.getElementById('exemple1').style.display='block';" onmouseout="document.getElementById('exemple1').style.display='none';" style="cursor: pointer;">Скрыть/показать блок</span>
<div id="exemple1" style="display: none; padding: 5px; border: 1px solid;">БЛОК</div>

При наведении курсора на текст появляется блок, который может содержать любые элементы веб-сайта. Несмотря на то, что кода мало — он плохо воспринимается и работать с ним не удобно, поэтому отделим html-теги, javascript-функции и CSS-стили:

<style type="text/css">
  #ShowHide1 { cursor: pointer; }
  #exemple1 { 
    display: none; 
    padding: 5px; 
    background-color: #CDE; 
    border: 1px solid; 
  }
</style>

<script type="text/javascript">

//дожидаемся полной загрузки страницы
window.onload = function () {
  //ищем элемент по селектору
  var a = document.querySelector('#ShowHide1');
  //вешаем на него события
  a.onmouseout = function(e) {
    document.getElementById('exemple1').style.display='none';
  }

  a.onmouseover = function(e) {
    document.getElementById('exemple1').style.display='block';
  };
}

</script>


<span id="ShowHide1">Скрыть/показать блок</span>
<div id="exemple1">БЛОК</div>

Количество строк увеличилось, но код стал лучше читаться и теперь править его проще.

События onmouseover и onmouseout в jQuery

Javascript это хорошо, но если в проекте используется библиотека jQuery, то стоит воспользоваться её возможностями для работы с событиями onmouseover и onmouseout. Перепишем предыдущий пример на jQuery.

<script type="text/javascript">

//дожидаемся полной загрузки страницы
$(function () {
  $("#ShowHide1").on("mouseover mouseout", function(){
        //быстро изменяем стиль display
        $("#exemple1").slideToggle("fast");
    });
});
</script>

<span id="ShowHide1">Скрыть/показать блок</span>
<div id="exemple1">БЛОК</div>

Скрипт сократился за счет того, что одну функцию вешаем на оба события сразу. Так же, для вызова событий можно воспользоваться следующей конструкцией:

$(function () {
  $("#ShowHide1").mouseover(function(){
        //действия
   });
   
    $("#ShowHide1").mouseout(function(){
        //действия
   });
});