javascript - css/javascript 的可见设置

Question

我想让我的 html 的一部分(导航栏类型对象，如果它有所不同)不可见，直到我将鼠标悬停在页面上的某个位置上。然后，我希望能够将鼠标悬停在使其可见的按钮上，让导航栏弹出，然后能够在导航栏不消失的情况下访问导航栏中的元素。有人有任何指示吗？我可能想编写一个 javascript 函数来执行此操作，但我不确定如何着手使事物不可见/可见并使用 javascript 切换该状态。

谢谢

Answer 1

只需创建一个隐藏的导航栏并为按钮添加一个 onmouseover 函数:

<div id='navbar' style='display:none'>
[content]
</div>

和按钮:

<button onmouseover="document.getElementById('navbar').style.display='block'">Hover Over Me</button>

如果导航栏要出现在按钮上方或紧邻按钮，您还可以研究一个全 css 解决方案，但您必须确保您的鼠标永远不必“离开”按钮在前往导航栏时(只要您可以到达导航栏，即使导航栏大于/位于按钮 div 顶部，不离开按钮 div 也可以正常工作):

<style>
.button {width:100px; height:20px; color:#fff;background-color:#360; position:relative;}
.navbar {display:none; position:absolute; top:19px; left:0px; z-index:10; background-color:#fff;color:#000;}
.button:hover .navbar {display:block;}
</style>
<div class='button'>
   <span>HOVER OVER ME</span>
   <div class='navbar'>[The contents of my nav bar]</div>
<div>