RealAdmin.ru

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

JavaScript,jQuery
Категория: Кодинг
22 Июл 2014 г. в 09:51

События 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.

не забудьте про CSS стили
<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(){
        //действия
   });
});
Теги:
Посмотрите похожее — 6
Комментарии — 0
    © REALADMIN.RU   2016 г.
    Страница сгенерирована: 0,0933 s | 10 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С
    Home Question Top