El color de fondo del cuadro div se puede cambiar fácilmente usando HTML, CSS y Javascript. Usaremos el método querySelector() y addEventListener() para seleccionar el elemento y luego aplicar algo de lógica matemática para cambiar su color de fondo. Las siguientes secciones lo guiarán sobre cómo crear el efecto.
Código HTML: En esta sección, crearemos una estructura básica del cuerpo. La sección del cuerpo contiene un elemento <div> cuyo color de fondo cambiará cuando el mouse se mueva sobre el elemento div.
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title> How to Change Background Color of a Div on Mouse Move Over using JavaScript ? </title> </head> <body> <div class="first"></div> </body> </html>
Código CSS: en esta sección, usaremos algunas propiedades CSS para diseñar el elemento div.
<style>
.first {
position: absolute;
background: #E73C49;
width: 300px;
height: 250px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
Código Javascript:
Paso 1: El primer paso es crear una array que consta de diferentes colores.
Paso 2: El segundo paso es usar el método querySelector() para seleccionar el elemento div y luego usar el método addEvenListener() para adjuntarle un controlador de eventos (pasar el mouse).
Paso 3: En el último paso, diseñaremos el fondo del elemento div usando algo de lógica, es decir, usaremos la función Math.random() en la array para devolver un número de punto flotante entre el rango de la array y luego usaremos Math.floor( ) para redondear el número flotante hacia abajo a su entero más cercano.
<script type="text/javascript">
var color = [, "#3C9EE7", "#E7993C",
"#E73C99", "#3CE746", "#E7993C"];
document.querySelector("div").addEventListener(
"mouseover", function () {
document.querySelector("div").style.background
= color[Math.floor(Math.random() * color.length)];
})
</script>
Código completo: en esta sección, combinaremos las tres secciones de código anteriores.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
How to Change Background Color
of a Div on Mouse Move Over
using JavaScript ?
</title>
<style>
.first {
position: absolute;
background: #E73C49;
width: 300px;
height: 250px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="first"></div>
<script type="text/javascript">
var color = [, "#3C9EE7", "#E7993C",
"#E73C99", "#3CE746", "#E7993C"];
document.querySelector("div").addEventListener(
"mouseover", function () {
document.querySelector("div").style.background
= color[Math.floor(Math.random() * color.length)];
})
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA