Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

Уход мышки с блок

Поддержи проект!!! smile

onmouseleave javascript или "Уход мышки с блока", сколько способов существует определить Уход мышки с элемента Dom-а.

Подробно о "onmouseleave Event"

  1. Использование "onmouseleave" внутри тега.
  2. Использование onmouseleave + function
  3. Пример использования onmouseleave + addEventListener
  4. Скачать можно здесь

  1. Использование "onmouseleave" внутри тега.

    Одним из способов использования onmouseleave - размещение "onmouseleave" внутри тега.

    Для того, чтобы продемонстрировать использование "onmouseleave" нам понадобится элемент Dom - пусть это будет div, и добавим ему class="onmouseleave" :

    Также туда добавим событие "onmouseleave" с функцией myFunction:

    <div onmouseleave="myFunction(event)" class="onmouseleave"></div>
    Css:

    Немного стилей для нашего блока:

    .onmouseleave{
    background: #e9e9e9;
    width: 300px;
    height: 100px;
    margin: auto;
    border: 1px solid;
    }
    javascript

    Напишем нашу функцию:

    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "Вы ушли с блока";
    }
    </script>

    Результат использования onmouseleave в теге:

    Будем передавать - пусть это будет текст в отдельный div "Получаем".

    Наведите мышку на блок:

    Получаем


  2. Использование onmouseleave + function

    Второй способ использования onmouseleave равно function.

    Нам опять понадобится div, внутрь добавим id, чтобы обратиться к тегу

    <div id="theDIV" class="onmouseleave"></div>

    В абзац "p" будем передавать полученные данные:

    <p id="demo_1"></p>

    Стили повторять не буду - см. выше.

    Соберем скрипт:

    <script>

    document.getElementById("theDIV").onmouseleave = function(e) {

    document.getElementById("demo_1").innerHTML = "Вы ушли с блока";

    };

    </script>

    Результат onmouseleave + function

    Проведите мышкой по блоку:

    Получаем


  3. Пример использования onmouseleave + addEventListener

    Следующий вариант использования onmouseleave, аналогичен первому, только здесь будем использовать "addEventListener":

    Html:

    <div id="theDIV_2" class="onmouseleave"></div>

    <p id="demo_2"></p>

    Css:

    Аналогичные первому пункту.

    javascript

    <script>

    document.getElementById("theDIV_2").addEventListener("mouseleave", function(e) {

    document.getElementById("demo_2").innerHTML = "Вы ушли с блока";

    });

    </script>

    Результат onmouseleave + addEventListener

    Получаем


Последняя дата редактирования : 06.02.2021 17:53
Название скрипта :Функция onmouseleave
Скрипт № 62.5Ссылка на скачивание : Все скрипты на одной странице
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
onmouseleavejs onmouseleave document onmouseleaveсобытие onmouseleaveonmouseleave eventonmouseleave javascript window onmouseleave

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
23/07/2021 10:58
Сам офигеваю...
подробнее.
александр анатольевич таширев :
21/07/2021 02:47
прикольно
подробнее.
Марат :
17/07/2021 04:14
Рад, что помог! Приходите ещё!
подробнее.
Slomal Plintus :
16/07/2021 06:41
спасибо за ответ, очень помогло!
подробнее.
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.

текст_ссылки