este es mi html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="script.js"></script> </head> <body onload="load();"> <img src="img1.png"> <img src="img2.png"> <img class="img3" src="img3.png"> </body> </html>Y quiero que la tercera imagen vaya a la izquierda cuando el mouse esté sobre ella. (Tiene posición: absoluta; en ella) usando este código js
let img; function load(){ img = document.querySelector(".img3"); img.addEventListener("mouseover", mouseover); } function mouseover(){ img.style.left = "0px"; }pero mouseover nunca se llama. (Comprobado con el registro)
En tu css puedes usar
.img3:hover{ /* css here */ }Si usa este método, no necesita usar Javascript para cambiar css al pasar el mouse, ya está integrado en css :)
puede usar el método hover en css para lograr esto, se vería así:
.img3:hover { width: *put desired width here*; height: *put desired height here*; }Es posible que deba usar etiquetas de identificación para hacer que la imagen predeterminada se reduzca cuando ocurra el evento img3:hover. Puede encontrar más información al respecto aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover