How to make a hover effect in javascript?
How to make a hover effect in javascript?
1 answer
by
darion ,
2 years ago
@jerad
To create a hover effect in JavaScript, you can use the mouseenter and mouseleave events to listen for when the cursor enters or leaves an element. Here's an example of how you can implement a simple hover effect using JavaScript:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
transition: background-color 0.3s ease;
}
.box:hover {
background-color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="script.js"></script>
</body>
</html>
|
JavaScript (script.js):
1 2 3 4 5 6 7 8 9 |
const box = document.querySelector('.box');
box.addEventListener('mouseenter', () => {
box.style.backgroundColor = 'blue';
});
box.addEventListener('mouseleave', () => {
box.style.backgroundColor = 'red';
});
|
In this example, the box element will change the background color to blue when the cursor enters it (mouseenter event), and revert back to red when the cursor leaves it (mouseleave event). The transition property in the CSS ensures a smooth transition between colors.
Related Threads:
How to make single bar as 3d effect in d3.js?
How to make a loop with a timer in canvas in javascript?
How to make a redirect in php and javascript?
How to make route parameters optional in ember.js?Javascript
How to block user with immediate effect in auth0?
How long for seo changes to take effect?