phpjsJqueryhtmlcssblog

Когда мышка сверху блок

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

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

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

Скопировать ссылку



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

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


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

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

<div onmouseover="myFunction(event)" class="onmouseover"></div>

Css:

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

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


javascript

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

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


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

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

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

Получаем

Скопировать ссылку



Использование onmouseover + function

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

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

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

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

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

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

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

<script>

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

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

};

</script>

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

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

Получаем

Скопировать ссылку



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

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

Html:

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

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

Css:

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

javascript

<script>

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

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

});

</script>

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

Получаем

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---