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:
xxxxxxxxxx1
<style>2
3
.hover {4
background: orange;5
}6
7
</style>8
9
<div onmouseover="this.className='hover';" onmouseout="this.className='';">Hover me</div>
In this section, we present a full example of how to create the hover effect without using the :hover pseudo-class.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
div {7
height: 100px;8
width: 100px;9
border: 1px solid black;10
}11
12
.hover {13
background: orange;14
}15
16
</style>17
</head>18
<body>19
<div onmouseover="this.className='hover';" onmouseout="this.className='';">Hover me</div>20
</body>21
</html>
