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 change the background color of the active nav-item?
- How to change background color of a canvas circle using Fabric.js ?
- HTML | Change Background color using onmouseover property
- How to change background color of canvas-type text using Fabric.js ?
- How to change selection background color of a canvas circle using Fabric.js ?
- How to change an element color based on value of the color picker value using onclick?
- How to change an element color based on value of the color picker value on click?
- How to split text horizontally on mouse move over using CSS ?
- Difference between background and background-color
- How to set the SVG background color ?
- How to change the background image using jQuery ?
- CSS | background-color Property
- How to change SVG color ?
- Set the opacity only to background color not on the text in CSS
- How to change color of PNG image 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 email@example.com. 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.