made a <div> display:block with onmouseover() but i can't click on it becasue as soon as-CodePudding

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="#" onm ouseover="LoginShow()" onm ouseout="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="#" onm ouseover="LoginShow()">Login/Sign Up</a> 
 <div  id="log" onm ouseover="LoginShow()" 
 onm ouseout="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.

CodePudding user response：

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  onm ouseover="showLog()" onm ouseout="hideLog()">
  I am the wrapper
  <div  id="target">
    <p>Here is some content inside wrapper element</p>
  </div>
</div>

CodePudding user response：

i think it can be done with css selectors as you can make other div as the switch to change other elements. Reference for css selectors

And i think your div is part of button which is the reason why they disappear. if that is the case then you should try giving your button "position:relative" and then your div element the "position:absolute". it might work.

Edited: here is what i tried, its not appealing but just look at it, if it is what you are trying to achieve.

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

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

.container{
    width:400px;
    height:400px;
    background:lightgreen;
    border:1px red solid;
}
#log{
    background:#efefef;
    padding:20px; 
    width:100px;
    text-align: center;
     display:none;
}
.log>button{
    padding:20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="custom.css">
</head>
<body>
    <div >
        <a href="#" onm ouseover="LoginShow()" onm ouseout="LoginHide()">Login/Sign Up</a>
        <div id="log" onm ouseover="LoginShow()" onm ouseout="LoginHide()"><button>Sign Up</button></div>
    </div>
    <script src="main.js"></script>
</body>
</html>