悬停后下拉菜单消失

问题描述 投票：0回答：1

大家晚上好

我尝试创建一个导航，其中主类别具有各种子类别。如果您将鼠标悬停在主类别上，就会出现子类别。

到目前为止，它可以工作，但是子类别列表之后不会消失，而是在悬停后仍然存在。

我尝试使用 MouseOut 创建一个函数（在下面的代码中，这被注释掉了），但是如果我移动鼠标，导航很快就会消失。

代码仅用于测试目的，因此JS不会存储在单独的文件中。

* {
    padding: 0;
    margin: 0;
}

#Hauptnavi {
    background-color: gray
}

nav ul li {
    list-style-type: none;
}

nav ul li a {
    text-decoration: none;
}

#Unternavi {
    opacity: 0;
    visibility: none; 

}
<body>
<nav role="Navigation">
    <ul id="Hauptnavi">
        <li><a href="#">Start</a></li>
        <li id="Servicehover"><a href="#">Service</a></li>
            <ul id="Unternavi">
                <li><a href="#">Unterseite A</a></li>
                <li><a href="#">Unterseite B</a></li>
                <li><a href="#">Unterseite C</a></li>
            </ul>
        <li><a href="#">Contact</a></li>
    </ul>

</nav>


<script>
document.getElementById("Servicehover").addEventListener("mouseover", MouseOver);
/* document.getElementById("Hauptnavi").addEventListener("mouseout", MouseOut); */

function MouseOver() {
    document.getElementById("Unternavi").style.visibility = "visible";
    document.getElementById("Unternavi").style.opacity = 1;
}

/*
function MouseOut() {
    document.getElementById("Unternavi").style.visibility = "none";
    document.getElementById("Unternavi").style.opacity = 0;
} */

</script>
</body>
</html>

实现这个案例的最佳方式是什么？我不需要现成的解决方案，只需要一些关于如何正确实施的建议。

非常感谢。

我尝试使用 MouseOut 创建一个函数（在下面的代码中，这被注释掉了），但是如果我移动鼠标，导航很快就会消失。

我也尝试使用点击事件，但它只适用于“document.getElementById(”Hauptnavi”)....如果我尝试访问id“Servicehover”它不起作用。

javascript html css navigation
1个回答
0
投票

你可以试试这个代码

document.getElementById("Servicehover").addEventListener("mouseover", MouseOver);
document.getElementById("Servicehover").addEventListener("mouseout", MouseOut);

function MouseOver() {
    document.getElementById("Unternavi").style.visibility = "visible";
    document.getElementById("Unternavi").style.opacity = "1";
    document.getElementById("Unternavi").style.height = "100%"
}


function MouseOut() {
    document.getElementById("Unternavi").style.visibility = "none";
    document.getElementById("Unternavi").style.opacity = 0;
    document.getElementById("Unternavi").style.height = "0";
}
* {
  padding: 0;
  margin: 0;
}

#Hauptnavi {
  background-color: gray
}

nav ul li {
  list-style-type: none;
}

nav ul li a {
  text-decoration: none;
}

#Unternavi {
  height: 0;
  opacity: 0;
  visibility: none; 
}
  <nav role="Navigation">
    <ul id="Hauptnavi">
        <li><a href="#">Start</a></li>
        <li id="Servicehover"><a href="#">Service</a></li>
            <ul id="Unternavi">
                <li><a href="#">Unterseite A</a></li>
                <li><a href="#">Unterseite B</a></li>
                <li><a href="#">Unterseite C</a></li>
            </ul>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.