Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Change the Background Color of a Div on Mouse Move Over using JavaScript?
The mouseover event is used in the JavaScript code to change the color of background to an elements of HTML. We also want to restore the color to blue after removing our mouse from the element. As a result, we have also used the mouseout event. This will happen when we remove our mouse pointer from the element.
getElementById() produces an object of element which represents the element whose id attribute matches the provided string. Because element IDs must be unique if supplied, they're a convenient method to rapidly retrieve a single element.
The addEventListener() function is employed to associate an event handler with a specific element. It has no effect on the current event handlers. Events are thought to be a necessary component of JavaScript. A web page replies to an event that has happened. Events can be produced by users or through APIs. An event listener is a JavaScript process that waits for an occurrence to take place.The addEventListener() method is a JavaScript constructor function. We can add numerous event handlers to an element without overwriting the current ones.
Using the style.backgroundColor Property
style.backgroundColor property is used to change the element color, and it returns the string value which represents the background color. The default value of these background property is transparent.
The Document.querySelectorAll(), getElementById(), and Document.querySelector(),is only accessible on the global document object. To add functionality to a web page, JavaScript code is employed. In this case, we utilized the arrow function with the "id" parameter. We may also use CSS code to modify the background color. These are easy methods to use, and we display all code with an example of style.
Syntax
The following is the syntax for the background color property −
document.getElementById('id').style.backgroundColor = 'color';
Parameters
backgroundColor − To change the color of the background.
getElementById − To read and edit the specific HTML Elements.
color − Used to define the color for display.
Example
In these example, we are going to see how to change the color of background for a Div on Mouse Move Over using the JavaScript −
<html>
<head>
<style>
#sampleid {
background-color: blue;
width: 650px;
height: 300px;
}
</style>
</head>
<body>
<h2>Changing the Background color of a Div on Mouse Move Over</h2>
<p> Move the mouse over the below DIV to change the background color</p>
<div id="sampleid"></div>
<script>
document.getElementById("sampleid").addEventListener("mouseover", function() {
document.getElementById("sampleid").style.backgroundColor = "pink";
});
document.getElementById("sampleid").addEventListener("mouseout", function() {
document.getElementById("sampleid").style.backgroundColor = "violet";
});
</script>
</body>
</html>
As we seen in the example, here we used the addEventListener(), mouseover, and mouseout events. If you execute the entire code in your browser, you will see the blue square. However, if you hold your mouse cursor over the element, the color will change to pink. When you remove your mouse pointer from the element, the background color returns to Violet.
Example
Let us see the another example, for changing the background color of a Div on Mouse Move Over by using the querySelector(), addEventListener(), and style.background property of JavaScript.
<html>
<head>
<style>
.classfirst {
width: 600px;
background: green;
height: 450px;
position: absolute;
}
</style>
</head>
<body>
<h2>Changing the background color of a Div on Mouse Move Over</h2>
<p> Move the mouse over the below DIV to change the background color</p>
<div class="classfirst"></div>
<script>
var color = ["blue", "purple","orange", "black", "white"];
document.querySelector("div").addEventListener("mouseover", function () {
document.querySelector("div").style.background = color[Math.floor(Math.random() * color.length)];
})
</script>
</body>
</html>
The div box's background color may be readily modified with HTML, CSS, and JavaScript. To pick the element, we'll use the querySelector() and addEventListener() methods.
The document. querySelector() returns the first element in the document that matches the supplied selector or a set of selectors. When JavaScript matches a given element in a document, it finds its application in the HTML elements. If no matches are discovered, null is returned by default.
In the first step we will construct different colors for an array.
The second step is to pick the div element using the querySelector() function and then add an event handler (mouseover) to it with the addEvenListener() method.
Conclusion
In this article, we have successfully explained how we can change the background color of a Div on Mouse Move Over using JavaScript along with examples. We have used two different examples, in the first example, we used the addEventListener, mouseover and mouseout event, and style.backgroundColor property. For the second example,.we have used the addEventListener, querySelector, and style.background property to change the color of background for a Div.
2K+ Views
