Change background color based on mouse location

Developer
Michael Chernin
Size
2,046 Kb
Views
8,096
  1. Change background color based on mouse location Previews
  2. Change background color based on mouse location HTML Codes
  3. Change background color based on mouse location JS Codes

How do I make an change background color based on mouse location?

Change background color based on mouse location using javascript.. What is a change background color based on mouse location? How do you make a change background color based on mouse location? This script and codes were developed by Michael Chernin on 19 January 2023, Thursday.

Change background color based on mouse location Previews
IQ Test

Change background color based on mouse location - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Change background color based on mouse location</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
</head>
<body> <script src="js/index.js"></script>
</body>
</html>

Change background color based on mouse location - Script Codes JS Codes

'use strict';
// create div element
var div = document.createElement('DIV');
// set height of element
div.style.height = '100vh';
// append element to DOM
document.body.appendChild(div);
// add event listener to element
div.addEventListener('mousemove', function (event) { console.log(event); var x = event.clientX; var y = event.clientY; div.textContent = x + ', ' + y; div.style.backgroundColor = 'rgb(' + x + ', ' + y + ', 100)';
});
Change background color based on mouse location - Script Codes
Change background color based on mouse location - Script Codes
Home Page Home
Developer Michael Chernin
Username mchernin34
Uploaded January 19, 2023
Rating 3
Size 2,046 Kb
Views 8,096
Do you need developer help for Change background color based on mouse location?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Michael Chernin (mchernin34) Script Codes
Name
Image grid with captions
Column Drop
Starter Portfolio
Animated card
Teachers Apps
Pure CSS Speech Bubbles
Popover Navigation
A Pen by Michael Chernin
Slide Out Menu
Icon Grid
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!