做了一个<div> display:block with onmouseover() 但我无法点击它，因为一旦我将鼠标移开，它就会因为 onmouseout() 而消失</div><div id="text_translate"><p>所以我做了一个 display: block 当鼠标悬停在某个时，并 display: none 当 cursor 移开时。 '</p><p> <a href="https://i.stack.imgur.com/hu3Zz.png" rel="nofollow noreferrer">我制作的 div 仅在鼠标悬停在某个链接上时显示</a></p><p> <a href="https://i.stack.imgur.com/afbPC.png" rel="nofollow noreferrer">div 有一个 display: none 当鼠标离开链接时</a></p><p>这是我用过的代码</p><p> HTML：</p><pre> <a href="#" onmouseover="LoginShow()" onmouseout="LoginHide()">Login/Sign Up</a></pre><p> JavaScript：</p><pre> function LoginShow (){ document.getElementById("log").style.display="block";} function LoginHide(){ document.getElementById("log").style.display="none";}</pre><p> 但是我无法单击 div，因为一旦我尝试将 cursor 移动到 div 中的按钮，则 div 将不显示任何内容，因为我必须将 cursor 远离链接。</p><p> 我是 JS 新手，但我见过其他 web 页面这样做，div 在鼠标悬停时显示的方式是什么，可以单击并显示：只有当我离开 div 时才显示。</p><p> 我也试过</p><pre> <a href="#" onmouseover="LoginShow()">Login/Sign Up</a> <div class="login" id="log" onmouseover="LoginShow()" onmouseout="LoginHide()"></pre><p> 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.</p></div>

Question

So I made a display: block when the mouse hovers over a certain, and display: none when the cursor moves away.所以我做了一个 display: block 当鼠标悬停在某个时，并 display: none 当 cursor 移开时。 ' '

A div I have made that displays only when the mouse hovers over a certain link我制作的 div 仅在鼠标悬停在某个链接上时显示

the div has a display: none when the mouse moves away from the link div 有一个 display: none 当鼠标离开链接时

this is the code I have used这是我用过的代码

HTML: HTML：

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

JavaScript: 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.但是我无法单击 div，因为一旦我尝试将 cursor 移动到 div 中的按钮，则 div 将不显示任何内容，因为我必须将 cursor 远离链接。

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.我是 JS 新手，但我见过其他 web 页面这样做，div 在鼠标悬停时显示的方式是什么，可以单击并显示：只有当我离开 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. 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

i think it can be done with css selectors as you can make other div as the switch to change other elements.我认为可以使用 css 选择器来完成，因为您可以将其他 div 作为更改其他元素的开关。 Reference for css selectors css 选择器参考

And i think your div is part of button which is the reason why they disappear.而且我认为您的 div 是按钮的一部分，这就是它们消失的原因。 if that is the case then you should try giving your button "position:relative" and then your div element the "position:absolute".如果是这种情况，那么您应该尝试给您的按钮“位置：相对”，然后您的 div 元素为“位置：绝对”。 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 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

You can do it without any js, take a look at below snippet.你可以在没有任何 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>

问题描述

2 个解决方案

解决方案1
1 2021-12-09 10:47:33

解决方案2
1 已采纳 2021-12-09 10:54:12

问题描述

2 个解决方案

解决方案1 1 2021-12-09 10:47:33

解决方案2 1 已采纳 2021-12-09 10:54:12

解决方案1
1 2021-12-09 10:47:33

解决方案2
1 已采纳 2021-12-09 10:54:12