<div> display:block with onmouseover() 但我无法点击它，因为一旦我将鼠标移开，它就会因为 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()<div> display:block with onmouseover() 但我无法点击它，因为一旦我将鼠标移开，它就会因为 onmouseout() 而消失
【发布时间】：2022-01-14 04:39:06
【问题描述】：

所以我做了一个 display: block 当鼠标悬停在某个时， 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 就会不显示任何内容，因为我必须将光标从链接上移开。

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

我也试过

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

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

【问题讨论】：

嗨！请使用 minimal reproducible example 来更新您的问题，以展示问题，最好是使用 Stack Snippets（[<>] 工具栏按钮）的 runnable 问题； here's how to do one.
欢迎来到 Stack Overflow！请拿起tour（你会得到一个徽章！），环顾四周，通读help center，尤其是How do I ask a good question?，我还推荐Jon Skeet的Writing the Perfect Question和Question Checklist。
要改进/澄清问题，请使用问题上的“编辑”链接，而不是在 cmets 中发布代码。但同样，请做一个完整的 sn-p（见上文），这样人们可以更轻松地帮助您并防止误解。

标签： javascript html display onmouseover onmouseout

【解决方案1】：

不用js也可以，看下面sn-p。

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>

【讨论】：

是的，我想到了，但是有没有办法用 JS 来做呢？我想用 JS 来做这件事，因为我现在正在学习它。
当然，我编辑了我的响应并通过在 JS 中使用 onmouseover 和 onmouseout 事件实现了同样的效果

【解决方案2】：

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

我认为您的 div 是按钮的一部分，这就是它们消失的原因。如果是这种情况，那么您应该尝试给您的按钮“位置：相对”，然后您的 div 元素为“位置：绝对”。它可能会起作用。

编辑：这是我尝试过的，它并不吸引人，但只要看看它，如果它是你想要实现的。

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>

【讨论】：

是的，按钮在div里面，idk如果你没有看到图片，但是当鼠标悬停在锚标签上时会显示div，然后你可以点击“登录/登录” “向上”按钮，如果您远离锚标记或 div（显示时），它就会消失，这就是想法。
尽量保持问题的标题/主题简短，以便通过不花太多时间阅读它来吸引更多人。