我如何在鼠標懸停

顯示特定的div的項目有格結構我如何在鼠標懸停

<div id="navigate"> 
    <div class="menu"> 
     <div class="group">Mail</div> 
     <div class="item">Folders</div> 
     <div class="item">Messages</div> 
    </div> 
    <div class="menu"> 
     <div class="group">Contacts</div> 
     <div class="item">Friends</div> 
     <div class="item">Work</div> 
    </div> 
    <div class="menu"> 
     <div class="group">Setting</div> 
     <div class="item">General</div> 
     <div class="item">Account</div> 
    </div> 
</div>

現在所有的項目都隱藏起來，只能用類「組」顯示的div。我想要做的是，如果我將鼠標移到特定的菜單div上，只會出現該菜單的項目。

現在我有這樣的代碼：

function initialise() 
{ 
    hideAllItems(); 

    setMouseOvers(); 
} 

function hideAllItems() 
{ 
    var nav = document.getElementById("navigate"); 
    var items = nav.getElementsByClassName("item"); 

    for(var i = 0; i < items.length; i++) 
    { 
     items[i].style.visibility = "hidden"; 
     items[i].style.display = "none"; 
    } 
} 

function setMouseOvers() 
{ 
    var nav = document.getElementById("navigate"); 
    var menuArr = nav.getElementsByClassName("menu"); 

    for(var x = 0; x < menuArr.length; x++) 
    { 
     var itemArrs = menuArr[x].getElementsByClassName("item"); 

     /*var show = function(){ show(itemArrs); }; 
     var hide = function(){ hide(itemArrs); };*/ 
     menuArr[x].onmouseover=function(){ show(itemArrs); }; 
     menuArr[x].onmouseout=function(){ hide(itemArrs); }; 
    } 
} 

function show(itemArr) 
{ 
    for(var i = 0; i < itemArr.length; i++) 
    { 
     alert(itemArr[i].innerHTML); 
     itemArr[i].style.visibility = "visible"; 
     itemArr[i].style.display = "block"; 
    } 
} 

function hide(itemArr) 
{ 
    for(var i = 0; i < itemArr.length; i++) 
    { 
     itemArr[i].style.visibility = "hidden"; 
     itemArr[i].style.display = "none"; 
    } 
}

而且這個作品，認爲它只是顯示一般和賬戶無論我將鼠標懸停在該菜單。我模糊地理解最近出了什麼問題，但我無法解決它。有任何想法嗎？我不想更改html結構（例如添加id或創建特定的類），如果我可以幫助它！

來源

2014-03-13 Gwen Wong

創建的jsfiddle – Peter

可能重複：HTTP ：//stackoverflow.com/questions/9245182/how-can-i-show-a-div-only-when-hovering-a-menu-item-or -DIV –

可能重複[JQuery的：當鼠標懸停在菜單項，顯示文本]（http://stackoverflow.com/questions/1276889/jquery-when-hover-on-menu-item-display-text） –

我知道，你最有可能正在尋找一個JavaScript的解決方案，但你可以使用一個簡單的CSS的解決方案：

.group:hover ~ .item { 
    display: block; 
}

Working Fiddle

但請注意，它不是由舊的IE瀏覽器的支持（ < 8）瀏覽器SUPPORT。如果你想使用它，它取決於你的目標羣體。

來源

2014-03-13 12:49:54 Sebsemillia

在IE8失敗http://stackoverflow.com/questions/17108091/ie8-css-selector-tilde-addresses-only-first-element –

是的，你是正確的。我只是在研究瀏覽器支持..;） – Sebsemillia

爲什麼不直接使用CSS：DEMO

.menu .item{ 
    display:none; 
} 

.menu:hover .item{ 
    display:block; 
}

來源

2014-03-13 13:03:52

+1此外一個不錯的解決方案，與我的更好的瀏覽器支持！ :) – Sebsemillia

至於你問的僅JavaScript溶液（HTML/CSS沒有變化），我建議如下：
這個問題可以用「itemArrs」在一個匿名函數中，因爲只有最新的書面「itemArrs」用於所有這些函數，所以請使用「this」代替。

例如：

... 
groups[x].onmouseover=function(){ show(this); }; 
...

和

function show(item) { 
    var items = item.parentNode.getElementsByClassName("item"); 
    ...

一個完整的JS-唯一的解決辦法該作品可以在這裏找到： http://jsfiddle.net/Wn4d4/3/

來源

2014-03-13 13:04:43

我如何在鼠標懸停

回答

相關問題