Mi función onmouseenter no se activa.
Creé un botón que te permitiría ir a la parte superior. Sin embargo, una vez allí, quiero que el botón tenga una propiedad de visualización de ninguno. Intenté hacerlo de dos maneras. Uno con classList y el otro con style.display = 'none'. Ambos no funcionaron, ¿me estoy perdiendo algo en la lógica?
EDITAR-------------- al dejar el mouse, el botón debería volver a aparecer. Agregué la función.
Aquí hay una pluma de código
const topDiv = document.getElementById('topDiv') const arrowup = document.getElementById('arrowup') const hideArrow = () => { if (topDiv) { arrowup.classList.remove(showme'); arrowup.classlist.add('hideme'); } else { arrowup.classList.add('showme'); } } const showArrow = () => { if (!topDiv) { arrowup.classList.remove('hideme'); arrowup.classList.add('showme'); } } #top { height: 1000px; } a { position: fixed; top: 10px; } .showme { display: block; } .hideme { display: none; } <div onmouseleave="showArrow() onmouseenter="hideArrow()" id="top"> hello </div> <a class="showme" id="arrowup" onClick="hideArrow()" href="#top"> click me </a>arrowup.classList.add('hideme') y arrowup.classList.remove('showme') .Hay algunos problemas:
onmouseenter="hideArrow" falta corchetes -> onmouseenter="hideArrow()"add y remove son funciones que obtienen la clase como parámetro -> add('showme')Ejemplo de trabajo:
const topDiv = document.getElementById('topDiv') const arrowup = document.getElementById('arrowup') const hideArrow = () => { if (topDiv) { arrowup.classList.remove('showme'); arrowup.classList.add('hideme'); } else { arrowup.classList.add('showme'); } } #top { height: 1000px; } a { position: fixed; top: 50px; } .showme { display: block; } .hideme { display: none; } <div onmouseenter="hideArrow()" id="topDiv"> hello </div> <a class="showme" id="arrowup" onClick="hideArrow()" href="#topDiv"> click me </a>