HTML Code: In this section, we will create a basic structure of the body. The body section contains a <div> element that background color will be changed when mouse moves over the div element.
CSS Code: In this section, we will use some CSS property to style the div element.
Step 1: The first step is to create an array consisting of different colours.
Step 2: The second step is to use the querySelector() method to select the div element and then use addEvenListener() method to attach an event handler (mouseover) to it.
Step 3: In the last step, we will style the background of the div element using some logic i.e. we will use Math.random() function on the array to return a floating-point number between the array range then use Math.floor() method to round the floating number downward to its nearest integer.
Complete Code: In this section, we will combine the above three code sections.
- How to overlay one div over another div using CSS
- How to split text horizontally on mouse move over using CSS ?
- How to copy the content of a div into another div using jQuery ?
- HTML | Change Background color using onmouseover property
- How to change background color of canvas-type text using Fabric.js ?
- How to change background color of a canvas circle using Fabric.js ?
- How to change selection background color of a canvas circle using Fabric.js ?
- Difference between background and background-color
- How to animate div width and height on mouse hover using jQuery ?
- How to change an element color based on value of the color picker value using onclick?
- How to center a div within another div?
- How to clear all div's content inside a parent div ?
- How to change the background color of the active nav-item?
- How to change the “checked” background color of toggle switch in Bootstrap 4?
- Display div element on hovering over <a> tag using CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.