He creado un

con display:block y onmouseover(), pero no puedo hacer clic en él porque en cuanto alejo el mouse desaparece debido a onmouseout().

Entonces hice un

<

div> que se muestra cuando el ratón se coloca sobre un determinado , y se oculta cuando el cursor se aleja.

Un div que he creado que se muestra solo cuando el ratón se coloca sobre un determinado enlace

el div tiene un display: none cuando el ratón se aleja del enlace

este es el código que he utilizado

HTML:

<a href="#" onmouseover="LoginShow()" onmouseout="LoginHide()">Iniciar sesión/Registrarse</a>

JavaScript:

function LoginShow (){
document.getElementById("log").style.display="block";}


function LoginHide(){
document.getElementById("log").style.display="none";}

Pero no puedo hacer clic en el div porque tan pronto como intento mover el cursor a los botones en el div, el div desaparece y se oculta ya que debo alejar el cursor del enlace.

Soy nuevo en JS, pero he visto otras páginas web hacerlo, ¿cuál es la forma de hacer que el div se muestre al pasar el mouse sobre él y se pueda hacer clic y se oculte solo cuando me alejo del div?

También he intentado

<a href="#" onmouseover="LoginShow()">Iniciar sesión/Registrarse</a> 
<div class="login" id="log" onmouseover="LoginShow()" 
onmouseout="LoginHide()"> 

Esto soluciona en parte el problema, pero para que el div desaparezca tengo que alejar el cursor del div, si alejo el cursor de la etiqueta de anclaje, no desaparece.