如何隱藏導航欄中的元素，直到懸停在CSS中？

我正在爲網站製作導航欄。我從來沒有做過一個，這是我迄今爲止。我不確定如何將下拉部分隱藏起來，直到將鼠標放在第一部分上。特別是對於我的代碼，我想隱藏<dd>屬性，直到將鼠標移到它的父項<dt>元素上。現在他們不斷顯示。任何人都可以向我解釋如何做到這一點？如何隱藏導航欄中的元素，直到懸停在CSS中？

這裏是我的代碼：

<html><head> 

<style type='text/css'> 
body { 
    padding-top: 6px; 
} 

/* menubar start */ 
#menubar { 
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#5c5c5c), to(#1f1f1f)); 
    background: -webkit-radial-gradient(circle, #5c5c5c, #1f1f1f); 
    background: -moz-radial-gradient(circle, #5c5c5c, #1f1f1f); 
    background: -ms-radial-gradient(circle, #5c5c5c, #1f1f1f); 
    position: relative; 
    display: block; 
    height: 36px; 
} 

#menubar dl { 
    position: absolute; 
    z-index: 9005; 
    list-style: none; 
    width: 110px; 
    top: -16px; 
} 

#Home { left: 240px; } 
#Projects { left: 400px; } 
#Hack { left: 560px; } 
#About { left: 720px; } 
#Contact { left: 880px; } 

#menubar dt a { 
    display: block; 
    float: left; 
    width: 100%; 
    height: 20px; 
    padding-left: 24.75px; 
    padding-right: 24.75px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    border-radius: 2px; 
    background-color: transparent; 
    font-family: 'Trebuchet MS', sans-serif; 
    text-decoration: none; 
    text-align: center; 
    color: #ffffff; 
} 

#menubar dt a:hover { 
    background-color: #828282; 
    color: #000000; 
} 

#menubar dd { 
    float: left; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
} 

#menubar dd a { 
    display: block; 
    width: 100%; 
    height: 100%; 
    padding-left: 24.75px; 
    padding-right: 24.75px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    background-color: #5c5c5c; 
    color: #ffffff; 
    text-align: center; 
    text-decoration: none; 
    font-family: 'Trebuchet MS', sans-serif; 
} 

#menubar dd a:hover { 
    background-color: #828282; 
    color: #000000; 
} 
/* menubar end */ 
</style> 
</head><body> 

<div id='menubar'> 
    <dl id='Home'> 
     <dt><a href='#'>Home</a></dt> 
    </dl> 
    <dl id='Projects'> 
     <dt><a href='#'>Projects</a></dt> 
     <dd><a href='#'>Mini Projects</a></dd> 
     <dd><a href='#'>In Progress</a></dd> 
     <dd><a href='#'>Help</a></dd> 
    </dl> 
    <dl id='Hack'> 
     <dt><a href='#'>Hack</a></dt> 
     <dd><a href='#'>Information</a></dd> 
     <dd><a href='#'>Tutorials</a></dd> 
     <dd><a href='#'>Challenges</a></dd> 
    </dl> 
    <dl id='About'> 
     <dt><a href='#'>About</a></dt> 
    </dl> 
    <dl id='Contact'> 
     <dt><a href='#'>Contact Us</a></dt> 
    </dl> 
</div> 

<span id='lights' style="font-family: 'Trebuchet MS', sans-serif; font-size: 85%; color: #636363; line-height: 20%"><br> 
Lights: On 
<input type='radio' name='lis' value='on' id='LOn' onclick='setL(true)'> 
    Off 
<input type='radio' name='lis' value='off' id='LOff' onclick='setL(false)'> 
</span> 

</body></html>

來源

2012-10-30 jackcogdill

與隱藏的display:none作爲enhzflep暗示元素開始了。然後你可以使用jQuery來顯示和隱藏下拉菜單。

Here's a fiddle。

來源

2012-10-30 02:54:38 thingEvery

是啊，不像我所提供的解決方案 - 你可以很容易地可見/不可見的開關更改爲動畫淡入/淡出。如果你不需要動畫，這是矯枉過正的，但如果你在jQuery中大部分沒有受過教育，這是一個很好的切入點。就我所知，CSS在速度方面總是會擊敗javascript。 – enhzflep

謝謝！我從未使用jQuery，所以謝謝 – jackcogdill

如果添加這些樣式到你的CSS，它的工作原理。基本上，他們說dd元素的默認狀態是隱藏的。如果一個dl元素被徘徊，那麼它的dd兒童是可見的。

dl dd 
{ 
    display: none; 
} 

dl:hover dd 
{ 
    display: block; 
}

來源

2012-10-30 02:48:19 enhzflep

#menubar dd { 
display:none; 
float: left; 
height: 100%; 
width: 100%; 
margin: 0; 
} 


<script> 
$("#menubar dl,#menubar dl dd").hover(function(){ 
    $("#menubar dl dd").slideDown(); 
}, function(){ 
    $("#menubar dl dd").slideUp(); 
}); 
</script>

JSFIDDLE

來源

2012-10-30 11:03:41 Shakeel

如何隱藏導航欄中的元素，直到懸停在CSS中？

回答

相關問題