3 Ways to hover on elements.
.gif "3 ways hover element")
CSS Hover selector
Simplest to set a mouse-over event with a few lines of code.
<div class="box"></div>
.box {
height: 200px;
width: 200px;
background-color: red;
}
.box:hover {
background-color: yellow;
}
HTML Attribute
.box {
height: 200px;
width: 200px;
}
<div class="box"
onmouseover='this.style.background = "yellow"'
onmouseout='this.style.background = "red"'></div>
Javascript
Using addEventListner()
function changeColor(li) {
li.addEventListener('mouseover', e => {
e.target.style.background = 'red';
setTimeout(() => {
e.target.style.background = 'yellow'
}, 500);
});
};
Hope you like it. :)
.gif&description=3 Ways to hover on elements.){kind=link}