EN
JavaScript - onmouseover event example
0
points
In this article, we would like to show you onmouseover event example in JavaScript.
Quick solution:
var myElement = document.querySelector('#my-element');
myElement.addEventListener('mouseover', function() {
console.log('onmouseover event occurred.');
});
or:
<div onmouseover="handleMouseover()"> div body here... </div>
or:
var myElement = document.querySelector('#my-element');
myElement.onmouseover= function() {
console.log('onmouseover event occurred.');
};
Note:
The
onmouseoveris often used withonmouseoutevent. Check examples below to see how they work.
Practical examples
There are three common ways how to use onmouseover event:
- with event listener,
- with element attribute,
- with element property.
1. Event listener based example
In this section, we want to show how to use onmouseover event on div element via event listener mechanism.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1s;
}
</style>
</head>
<body>
<p>Move mouse pointer onto the square:</p>
<div id="square"/>
<script>
var mySquare = document.querySelector('#square'); // find element by id
mySquare.addEventListener("mouseover", handleMouseover); // add mouseover event
function handleMouseover(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
}
mySquare.addEventListener("mouseout", handleMouseout); // add mouseout event
function handleMouseout(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
}
</script>
</body>
</html>
2. Attribute based example
In this section, we want to show how to use onmouseover event on div element via attribute.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1s;
}
</style>
</head>
<body>
<p>Move mouse pointer onto the square:</p>
<div id="square" onmouseover="handleMouseover()" onmouseout="handleMouseout()"/>
<script>
var mySquare = document.querySelector('#square');
function handleMouseover(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
}
function handleMouseout(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
}
</script>
</body>
</html>
3. Property based example
In this section, we want to show how to use onmouseover event on div element via property.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1s;
}
</style>
</head>
<body>
<p>Move mouse pointer onto the square:</p>
<div id="square"/>
<script>
var mySquare = document.querySelector('#square');
mySquare.onmouseover = function(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
}
mySquare.onmouseout = function(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
}
</script>
</body>
</html>