Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mouseover and Mouseout Example</title> <style> #box { width: 200px; height: 200px; background-color: lightblue; } #innerBox { width: 100px; height: 100px; background-color: lightcoral; margin: 50px; } </style> </head> <body> <div id="box"> Hover over me! <div id="innerBox"></div> </div> <script> document.getElementById('box').addEventListener('mouseover', function() { this.style.backgroundColor = 'cyan'; }); document.getElementById('box').addEventListener('mouseout', function() { this.style.backgroundColor = 'lightblue'; }); </script> </body> </html>