用 onmouseover() 创建了一个 <div> display:block 但我无法点击它，因为一旦我将鼠标移开它就消失了，因为 onmouseout()

Question

于是我做了一个display: block when the mouse hover over a some , display: none 当光标移开时。 '

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

这是我用过的代码

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";}

但是我无法点击 div，因为一旦我尝试将光标移动到 div 中的按钮，div 就会显示 none 因为我必须将光标从 link.

移开

我是JS新手，但是我看到其他网页是这样做的，div鼠标悬停显示的方法是什么，可以点击显示：none只有当我离开 div.

我也试过了

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

有点解决了问题，但是要让 div 显示 none 我必须将光标从 div 移开，如果将光标移开从锚标签开始，它不会消失。

Answer 1

我认为可以使用 css 选择器来完成，因为您可以将其他 div 作为开关来更改其他元素。 Reference for css selectors

而且我认为您的 div 是按钮的一部分，这就是它们消失的原因。如果是这种情况，那么您应该尝试为您的按钮提供“position:relative”，然后为您的 div 元素提供“position:absolute”。它可能会起作用。

已编辑：这是我尝试过的，它没有吸引力，但看看它，如果它是你想要实现的。

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 class="container">
        <a href="#" onmouseover="LoginShow()" onmouseout="LoginHide()">Login/Sign Up</a>
        <div id="log" onmouseover="LoginShow()" onmouseout="LoginHide()"><button>Sign Up</button></div>
    </div>
    <script src="main.js"></script>
</body>
</html>

Answer 2

你可以不用任何 js 来做，看看下面的代码片段。

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>

用 onmouseover() 创建了一个 <div> display:block 但我无法点击它，因为一旦我将鼠标移开它就消失了，因为 onmouseout()

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

html

javascript

onmouseover

onmouseout

display