EN
JavaScript - onmouseout event example
0
points
In this article, we would like to show you onmouseout event example in JavaScript.
Quick solution:
var myElement = document.querySelector('#my-element');
myElement.addEventListener('mouseout', function() {
console.log('onmouseout event occurred.');
});
or:
<div onmouseout="handleMouseout()"> div body here... </div>
or:
var myElement = document.querySelector('#my-element');
myElement.onmouseout = function() {
console.log('onmouseout event occurred.');
};
Note:
The
onmouseoutis usually used withonmouseoverevent. Check examples below to see how they work.
Practical examples
There are three common ways how to use onmouseout 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 onmouseout 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 onmouseout 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 onmouseout 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>