Hace poco estaba en mi curso de JavaScript y me mandaron a hacer un ejercicio en cuestion, como este:
Crea una página que muestre cinco cuadrados pequeños de diferentes colores y un cuadrado grande. Cuando el ratón pase por encima de alguno de ellos, el color de fondo del cuadrado grande será del color de relleno del cuadrado pequeño.
El problema está en que según yo he escrito bien el codigo pero no funciona, dejo mi codigo a continuación:
div {
width: 50px;
height: 50px;
border: 1px solid black;
display: inline-block;
}
#rojo { background-color: red; }
#azul { background-color: blue; }
#amarillo { background-color: yellow; }
#verde { background-color: green; }
#marron { background-color: brown; }
#CajaCambiante {
width: 200px;
height: 200px;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ejercicio 2</title>
<link rel="stylesheet" href="main.css">
<script>
function cambio(e) {
bg = e.style.backgroundColor;
document.getElementById('CajaCambiante').style.backgroundColor = bg;
}
</script>
</head>
<body>
<div id="rojo" onmouseover="cambio(this)"></div>
<div id="azul" onmouseover="cambio(this)"></div>
<div id="amarillo" onmouseover="cambio(this)"></div>
<div id="verde" onmouseover="cambio(this)"></div>
<div id="marron" onmouseover="cambio(this)"></div>
<div id="CajaCambiante"></div>
</body>
</html>
¿Alguien puede decirme donde he fallado?