June 20, 2020

How to Change Background Image of DIV on Mouseover in Javascript

By Krishnaa JavaScript Questions 0 Comments

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:

<!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>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

CSS:

body {
    text-align: center;
}

div {
    height: 400px;
    width: 400px;
    border: 1px solid black;
    display: inline-block;
    background-image: url('images/1.jpg');
}

body {

text-align: center;

}

div {

height: 400px;

width: 400px;

border: 1px solid black;

display: inline-block;

background-image: url('images/1.jpg');

}

Javascript:

let myDiv = document.querySelector('div');

myDiv.addEventListener('mouseover', () => {
    myDiv.style.backgroundImage = `url('images/2.jpg')`;
});

myDiv.addEventListener('mouseleave', () => {
    myDiv.style.backgroundImage = null;
});