Estoy tratando de cambiar el color de los elementos de la barra de navegación cuando el mouse pasa sobre ellos.
Este fragmento de código hace eso, pero solo para el primer botón:
let navOne = document.getElementById("nav1"); function mouseOn() { nav1.style.color = "red"; } function mouseOff() { nav1.style.color = "black"; } navOne.addEventListener('mouseover', mouseOn); navOne.addEventListener('mouseout', mouseOff);He estado tratando de convertir el código para que las funciones funcionen para varios botones, pero parece que no puedo hacerlo funcionar. Aquí está el código hasta ahora:
let navOne = document.getElementById("nav1"); function mouseOn(navButton) { navButton.style.color = "red"; } function mouseOff(navButton) { navButton.style.color = "black"; } navOne.addEventListener('mouseover', mouseOn(navOne)); navOne.addEventListener('mouseout', mouseOff(navOne));No tiene errores, pero no provoca ningún cambio de color cuando muevo el botón del mouse sobre el elemento nav1.
Cualquier ayuda es muy apreciada.
Puede hacer que las funciones del controlador de eventos aprovechen el parámetro de event que se pasa en:
function mouseOn(e) { e.target.style.color = "red"; } function mouseOff(e) { e.target.style.color = "black"; } for (let navItem of document.querySelectorAll('nav a')) { navItem.addEventListener('mouseover', mouseOn); navItem.addEventListener('mouseout', mouseOff); } nav a { display: inline-block; padding: 10px; color: black; } <nav> <a href="#" id="nav1">Nav One</a> <a href="#" id="nav2">Nav Two</a> </nav> Sin embargo, usar un pseudo-atributo css :hover sería el enfoque preferido hoy en día. No se necesita código JS.
nav a { display: inline-block; padding: 10px; color: black; } nav a:hover { color: red; } <nav> <a href="#">Nav One</a> <a href="#">Nav Two</a> </nav>