EN
JavaScript - hover effect without CSS :hover pseudo-class
0
points
In this article, we would like to show you how to create the hover effect without CSS :hover pseudo-class using JavaScript.
Quick solution:
<style>
.hover {
background: orange;
}
</style>
<div onmouseover="this.className='hover';" onmouseout="this.className='';">Hover me</div>
Practical example
In this section, we present a full example of how to create the hover effect without using the :hover pseudo-class.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
border: 1px solid black;
}
.hover {
background: orange;
}
</style>
</head>
<body>
<div onmouseover="this.className='hover';" onmouseout="this.className='';">Hover me</div>
</body>
</html>