39 - Eventos mouseover, mouseout (DOM)
Problema:
Implementar una página que contenga tres botones y cuando ingrese la flecha del mouse al botón cambiar el color de texto del mismo, retornando al color original cuando retiramos la flecha del control.
pagina.html
estilos.css
funciones.js
Ejecución de la página
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prueba</title> </head> <body> <input type="button" name="boton1" value="boton 1"> <input type="button" name="boton2" value="boton 2"> <input type="button" name="boton3" value="boton 3"> <script src="funciones.js"></script> </body> </html>
let vec = document.getElementsByTagName('input') for (let f = 0; f < vec.length; f++) { vec[f].addEventListener('mouseover', entrar) vec[f].addEventListener('mouseout', salir) } function entrar(e) { e.target.style.color = '#f00' } function salir(e) { e.target.style.color = '#000' }
No tiene disponible el navegador la capacidad de iframe
Retornar