如何在导航栏中隐藏元素直到悬停在css中？答案

【问题标题】：How to hide elements in navbar until hover in css?如何在导航栏中隐藏元素直到悬停在css中？
【发布时间】：2012-10-30 02:35:37
【问题描述】：

我正在为网站制作导航栏。我以前从未做过，这就是我到目前为止所拥有的。在将鼠标悬停在第一部分之前，我不确定如何隐藏下拉部分。特别是对于我的代码，我希望隐藏 <dd> 属性，直到您将鼠标悬停在其父 <dt> 元素上。现在它们一直在显示。谁能给我解释一下怎么做？

这是我的代码：

<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>

【问题讨论】：

标签： html css hover menubar navbar

【解决方案1】：

按照 enhzflep 的建议，从 display:none 隐藏的元素开始。然后就可以使用jquery来显示和隐藏下拉菜单了。

Here's a fiddle.

【讨论】：

是的，与我提供的解决方案不同 - 您的解决方案可以轻松地将可见/不可见开关更改为动画淡入/淡出。如果您不想要动画，这有点矫枉过正，但如果您几乎没有受过 jQuery 教育，这是一个很好的切入点。据我所知，CSS 在速度方面总是会击败 javascript。

【解决方案2】：

如果您将这些样式添加到您的 CSS，它会起作用。基本上，他们说 dd 元素的默认状态是隐藏的。如果一个 dl 元素被悬停，那么它的 dd 子元素是可见的。

dl dd
{
    display: none;
}

dl:hover dd
{
    display: block;
}

【讨论】：

【解决方案3】：

#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

【讨论】：