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創建懸停菜單。

直接回答你的問題，你可以操縱display或visibility CSS值使用JavaScript像這樣：

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的高度和寬度以及填充或邊距不會影響它。另一方面，visibility屬性僅僅意味着你看不到元素的內容（文本，子元素等），但它仍然佔用DOM中的空間，所以其他元素將圍繞它移動。這可以用於隱藏/顯示內容，但不會讓頁面內容四處移動，因爲所有內容都可以再次顯示。

Answer 3

最可重複使用的方式做到這一點，將使用添加到元素的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 4

如果你使用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 5

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

，如果你想讓它與一些動畫