made a <div> display:block with onmouseover() but i can't click on it becasue as soon as I move my mouse away it disappears because of onmouseout()

Question

So I made a display: block when the mouse hovers over a certain , and display: none when the cursor moves away. '

A div I have made that displays only when the mouse hovers over a certain link

the div has a display: none when the mouse moves away from the link

this is the code I have used

HTML:

<a href="#" onmouseover="LoginShow()" onmouseout="LoginHide()">Login/Sign Up</a>

JavaScript:

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


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

But I can't click on the div because as soon as I try to move my cursor to the buttons in the div, the div goes to display none as I have to move my cursor away from the link.

I am new to JS, but I have seen other web pages do it, what's the way for the div to display on mouseover and can be clicked on and goes to display: none only when I move away from the div.

I have also tried

 <a href="#" onmouseover="LoginShow()">Login/Sign Up</a> 
 <div class="login" id="log" onmouseover="LoginShow()" 
 onmouseout="LoginHide()"> 

It kind of solves the problem, but for the div to go to display none I have to move the cursor away from the div, if the move the cursor away from the anchor tag, it doesn't go away.

Answer 1

You can do it without any js, take a look at below snippet.

let target = document.getElementById('target');

function showLog() {
  target.style.display = 'block';
}

function hideLog() {
  target.style.display = 'none';
}

.wrapper {
  background: #eee;
}

.wrapper .inner-content {
  display: none;
  position: absolute;
  background: red;
}

<div class="wrapper" onmouseover="showLog()" onmouseout="hideLog()">
  I am the wrapper
  <div class="inner-content" id="target">
    <p>Here is some content inside wrapper element</p>
  </div>
</div>