How to make a hover effect in javascript?
I'm getting started in this programming thing. I want to simulate css hover effect in javascript but I don't know how to do it. It is to apply it on an html element. Could you help me?
How to make a hover effect in javascript?
I'm getting started in this programming thing. I want to simulate css hover effect in javascript but I don't know how to do it. It is to apply it on an html element. Could you help me?
Share Improve this question asked Apr 30, 2023 at 3:47 Naomi VeraNaomi Vera 111 silver badge2 bronze badges7 Answers
Reset to default 4There is no advantage to using JavaScript (over the css :hover pseudoselector for this). But if you do:
I really remend using delegated event listening (as opposed to the examples in other answers). That is: You listen to event for the whole body and the filter out which elements that are targeted.
Advantages: You only need one event listener for multiple elements + the event listener will work for element added by JavaScript even after you have created the event listener.
html
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
js
document.body.addEventListener('mouseover', e => {
let button = e.target.closest('button');
if (!button) { return; }
button.style.backgroundColor = 'khaki';
});
document.body.addEventListener('mouseout', e => {
let button = e.target.closest('button');
if (!button) { return; }
button.style.backgroundColor = '';
});
No matter how many buttons (or whatever elements you want to listen to) this code would work...
There's no property in js to modify css selectors. However, you can get the css style element and append the text content with your own styles:
var style = document.querySelector("style");
style.textContent += `
button:hover {
background-color: blue;
}
`;<html>
<style>
button {
background-color: red;
}
</style>
<body>
<button>Hover me!</button>
</body>
<html>to do that you can use "mouseover" and "mouseout" events.
So, if you have an element like this:
<div id="hoverable">Element to do the hover effect</div>
you can create some events listener to that element in the next way:
const hoverableElement = document.getElementById('hoverable');
hoverableElement.addEventListener('mouseover', function() {});
hoverableElement.addEventListener('mouseout', function() {});
and inside the function/callback that is returned by the addEventListener is where you need to write your logic.
And the mouseover is an event listening when your mouse is over the element, and the mouseout is an event listening when your mouse was moved out of the element
To simulate a CSS hover effect in JavaScript, you can use the mouseenter and mouseleave events to detect when the mouse enters and leaves an element, respectively. For example:
HTML:
<div id="my-element">
Hover over me!
</div>
CSS:
#my-element {
background-color: blue;
color: white;
padding: 10px;
transition: background-color 0.5s ease;
}
#my-element:hover {
background-color: red;
}
Javascript:
const element = document.getElementById('my-element');
element.addEventListener('mouseenter', () => {
element.style.backgroundColor = 'red';
});
element.addEventListener('mouseleave', () => {
element.style.backgroundColor = 'blue';
});
We are simulating a CSS hover effect on the my-element's div. When the mouse enters the element, we change its background color to red, and when the mouse leaves, we change it back to blue. We also add a CSS transition to make the color change smoothly.
const button = document.querySelector('#myButton');
button.addEventListener('mouseover', () => {
button.classList.add('hover-effect');
});
button.addEventListener('mouseout', () => {
button.classList.remove('hover-effect');
});
var myElement = document.getElementById("my-element");
myElement.addEventListener("mouseover", function() {
myElement.classList.add("hover-effect");
});
myElement.addEventListener("mouseout", function() {
myElement.classList.remove("hover-effect");
});.hover-effect {
background-color: yellow;
color: red;
animation: shake 0.5s;
}
@keyframes shake {
0% { transform: translateX(0); }
50% { transform: translateX(10px); }
100% { transform: translateX(0); }
}
.hover-effect {
background-color: yellow;
}<button id="myButton">Clique em mim!</button>
<div id="my-element">Hover me!</div>Try using this unique code.
use the onmouseover and onmouseout codes in the html. can be used in js, jsx
source = https://www.w3schools./jsref/tryit.asp?filename=tryjsref_onmouseover
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="https://www.w3schools./jsref/smiley.gif" alt="Smiley" width="32" height="32">
<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>The easiest way can be like this:
let img = document.querySelectorAll('img');
img.forEach(i =>{
i.addEventListener('mouseover', ()=>{
i.style.width = '200%'
i.style.height = '200%'
})
})
img.forEach(i =>{
i.addEventListener('mouseleave', ()=>{
i.style.width = '50%'
i.style.height = '50%'
})
})