css/javascript的可见设置

我想让html的一部分（导航条类型的对象，如果有区别的话）不可见，直到我将鼠标悬停在页面上的某个位置。然后，我希望能够将鼠标悬停在使其可见的按钮上，使导航栏弹出，然后能够访问导航栏中的项目，而不使其消失。有人有什么建议吗？我可能想编写一个javascript函数来实现这一点，但我不知道如何使事物不可见/可见，并用javascript切换该状态

---

谢谢

只需创建一个隐藏的导航栏并在按钮上添加onmouseover功能：

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

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

[内容]

和按钮：

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

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

悬停在我身上

如果导航栏将显示在按钮上方或紧靠按钮旁边，您也可以研究一个全css解决方案，但您必须确保鼠标在移动到导航栏时永远不必“离开”按钮（只要您能够到达导航栏，即使导航栏大于按钮div/位于按钮div顶部，但不离开按钮div，也可以正常工作）：

.按钮{宽度：100px；高度：20px；颜色：#fff；背景色：#360；位置：相对；}
.navbar{显示：无；位置：绝对；顶部：19px；左侧：0px；z索引：10；背景色：#fff；颜色：#000；}
.button:hover.navbar{display:block；}
在我上空盘旋
[我导航栏的内容]

如果你只是想创建一个基本的悬停菜单，你根本不需要JavaScript，只需要CSS就可以了

下面是一个演示如何使用CSS创建悬停菜单

要直接回答您的问题，您可以使用JavaScript操作

显示

或

可见性

CSS值，如下所示：

var el = document.getElementById('someElement');

el.style.display = 'none'; //element is hidden
el.style.display = 'block'; //element is shown as a block level element
el.style.visibility = 'hidden'; //element is hidden
el.style.visibility = 'visible'; //element is visible

---

display

和

visibility

之间的区别在于您希望如何处理不可见元素。通过使用

display

属性，元素将不占用页面空间，其高度和宽度为0，填充或边距不会对其产生影响。oth上的

visibility

属性er hand只是表示您看不到元素的内容（文本、子元素等）但是它仍然会占用DOM中的空间，因此其他元素会在其周围移动。这对于隐藏/显示内容很有用，但不会让页面内容在所有内容再次可见时移动。

最可重用的方法是使用添加到元素中的css类将其标记为隐藏或删除以显示el水泥

css:

javascript:

var toggleOn = function(id) {
    var element = document.getElementById(id);
    element.className = element.className.replace(" hidden", "");
};
var toggleOff = function(id) {
    document.getElementById(id).className += " hidden";
}

---

如果使用jQuery，可以执行以下操作：

var setupNavbarInteraction = function(){
    var hideTimeout; 
    $("#hoverTarget").hover(
        function(){ $("#navBar").css({'display': 'block'}); }, 
        function(){ hideTimeout = setTimeout(function(){ $("#navBar").css({'display': 'block'}); }, 4500); }
    );
    $("#navBar").hover(
        function(){ clearTimeout(hideTimeout); }, 
        function(){ hideTimeout = setTimeout(function(){ $(this).css({'display': 'none'}); }, 1500) }
    );
    }
$(document).ready(setupNavbarInteraction);

此代码在您将鼠标悬停在触发器元素上时显示导航栏。然后，当您将鼠标悬停在触发器外时，它将等待4.5秒，然后再次隐藏导航栏。然后，第二部分取消先前的调用，在您将鼠标悬停在导航栏上时隐藏导航栏，然后在您将鼠标悬停在导航栏外后将其隐藏1.5秒。调整超时以适合您的口味NDIXD需要。超时允许用户继续使用元素，并且不会因意外鼠标移出导航栏区域而受到惩罚

$(document).ready(function(){$('myelement').slideUp();});   
 $('#element').live('mouseover',function(){$('myelement').slideUp();});
    $('#element2').live('mouseover',function(){$('myelement').slideDown();});

如果你想通过一些动画来完成，你可以使用easing插件