即使鼠标悬停在下拉菜单上，它也会隐藏

Question

我正在尝试制作下拉菜单。所以当我将鼠标悬停在按钮上时，列表应该弹出，当我离开按钮和列表（即 listcontainer）时，列表应该消失。除后一部分外，一切正常。一旦我离开按钮，列表就会消失（即使我在列表容器上）。 Issue我不明白为什么。您可以忽略 CSS 代码和 html 代码。语义：请注意按钮是 div 和 class 按钮

如果你已经阅读了代码： hideul 函数在从按钮进入列表容器时运行多次（请检查控制台）。我也不明白这部分。也请让我知道是否有更好的方法来执行此逻辑。

Please visit to see the error

var button = document.querySelector(".button")
var list = document.querySelector("ul")
var listcontainer = document.querySelector(".listcontainer")

var mouseleftlistcontainer = true
var mouseleftbutton = true

function hideul(e, text) {
    console.log(text)
    if (mouseleftlistcontainer && mouseleftbutton) {
        list.classList.remove("effectt")
    }
}

button.addEventListener("mouseover", e => {
    list.classList.add("effectt")
    mouseleftbutton = false
    hideul(e, "mouse entered button")
})

button.addEventListener("mouseleave", e => {
    mouseleftbutton = true
    hideul(e, " mouse left button")
})


listcontainer.addEventListener("mouseover", e => {
    mouseleftlistcontainer = false
    hideul(e, "mouse entered listcontainer")
})

listcontainer.addEventListener("mouseleave", e => {
    mouseleftlistcontainer = true
    hideul(e, "mouse left listcontainer")
})

.button{
    background-color: lightgreen;
    width:200px;
    height:50px;
    margin:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-top:30px;
    font-size: 25px;
}

.container{
    display: flex;
    margin:auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


ul{
    font-size: 20px;
    list-style: none;
    transform: translateY(-200px);
    transition: 0.2s all;
    
}

li{
    margin:2px;
    background-color: lightgreen;
    border-radius:5px;
    width:200px;
    display: flex;
    justify-content: center;
    align-items: center;   

}

.listcontainer{
    height:170px;
    overflow: hidden;
    background-color: red;
}

.effectt{
    transform: translateY(00px);
}

ul{
    background-color: bisque;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
    <script defer src="./script.js"></script>
</head>

<body>
    <div class="container">
        <div class="button">ONE</div>
        <div class="listcontainer">

            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
    </div>
</body>

</html>

Answer 1

您应该将受悬停效果影响的所有对象放入一个容器中，并在该容器上触发效果，如下所示：

var container = document.querySelector(".btn-container")
var list = document.querySelector("ul")

var mouseincontainer = true

function hideul(show, text) {
    console.log(text);
    
    if (mouseincontainer) {
      list.classList.add("effectt")
    }
    else {
      list.classList.remove("effectt")
    }
}

container.addEventListener("mouseover", e => {
    hideul(true, "mouse entered button")
})

container.addEventListener("mouseleave", e => {
    hideul(false, " mouse left button")
})

.button{
    background-color: lightgreen;
    width:200px;
    height:50px;
    margin:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin-top:30px;
    font-size: 25px;
}

.container{
    display: flex;
    margin:auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


ul{
    font-size: 20px;
    list-style: none;
    transform: translateY(-200px);
    transition: 0.2s all;
    
}

li{
    margin:2px;
    background-color: lightgreen;
    border-radius:5px;
    width:200px;
    display: flex;
    justify-content: center;
    align-items: center;   

}

.listcontainer{
    height:170px;
    overflow: hidden;
    background-color: red;
}

.effectt{
    transform: translateY(00px);
}

ul{
    background-color: bisque;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css">
    <script defer src="./script.js"></script>
</head>

<body>
    <div class="container">
      <div class="btn-container">
        <div class="button">ONE</div>
        <div class="listcontainer">

            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
      </div>
    </div>
</body>

</html>

Answer 2

这是您的代码中的问题

if (mouseleftlistcontainer && mouseleftbutton) {
        list.classList.remove("effectt")
    }

当你离开按钮时，满足这个条件，你的class被移除，但是一旦你进入列表容器，你需要重新添加'effectt' class。

即使鼠标悬停在下拉菜单上，它也会隐藏

dropdown hides even when mouse is over it

html

javascript

css

hover

dropdown