June 20, 2020
How to Change Background Image of DIV on Mouseover in Javascript
In this video tutorial, you will learn how to change background image of div on mouseover in javascript
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div></div> <script src="script.js"></script> </body> </html> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 |
body { text-align: center; } div { height: 400px; width: 400px; border: 1px solid black; display: inline-block; background-image: url('images/1.jpg'); } |
Javascript:
1 2 3 4 5 6 7 8 9 |
let myDiv = document.querySelector('div'); myDiv.addEventListener('mouseover', () => { myDiv.style.backgroundImage = `url('images/2.jpg')`; }); myDiv.addEventListener('mouseleave', () => { myDiv.style.backgroundImage = null; }); |