使用onmouseover()制作了一個display:block但我無法點擊它，因為一旦我將滑鼠移開它就會因為onmouseout()而消失-有解無憂

所以我做了一個 display: block 當滑鼠懸停在某個時候，當游標移開時 display: none 。'

我制作的 div 僅在滑鼠懸停在某個鏈接上時顯示

div 有一個 display: none 當滑鼠離開鏈接時

這是我使用的代碼

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 不顯示任何內容，我必須將游標從 div 上移開，如果將游標移離錨標記，它不會消失。

uj5u.com熱心網友回復：

你可以在沒有任何 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>

uj5u.com熱心網友回復：

我認為它可以使用 css 選擇器來完成，因為您可以將其他 div 作為更改其他元素的開關。 css 選擇器參考

而且我認為您的 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/377610.html

標籤：javascript html 展示鼠标悬停鼠标移出

上一篇：洗掉重復值并覆寫陣列

下一篇：切換時按鈕消失，側邊欄出現