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>

Answer 2

如果您只想创建一个基本的悬停菜单，则根本不需要 JavaScript，只需使用 CSS 即可。

这是一个 jsfiddle 演示，演示如何使用 CSS 创建悬停菜单。

要直接回答您的问题，您可以使用 JavaScript 操作 display 或 visibility 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 和 之间的区别可见性归结为您希望如何处理不可见元素。通过使用 display 属性，元素将不占用页面中的空间，它将具有 0 的高度和宽度，并且填充或边距不会对其产生影响。另一方面，visibility 属性仅意味着您看不到元素的内容（文本、子元素等），但它仍会占用 DOM 中的空间，因此其他元素将会移动围绕它。这对于隐藏/显示内容很有用，但当所有内容再次变得可见时，页面内容不会移动。

Answer 3

如果您使用 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 秒后将其隐藏。调整超时以适合您的口味和 IxD 需求。超时允许用户继续使用这些元素，而不会因为意外地将鼠标移出导航栏区域而受到惩罚。

Answer 4

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

css:

.hidden {

  /* there are several ways to hide, depeneding on the use case: */
  display: none;
  visibility: hidden;
  position:absolute; left:-9999;

}

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";
}

Answer 5

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

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