javascripthtmldisplayonmouseoveronmouseout

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()


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.


Solution

  • 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>