html - 如何更改此 CSS 以减少下拉效果的错误?
问题描述
我在下面提供了我的 CSS 和 HTML。我正在尝试完成我的下拉菜单,但它存在一个问题,导致过渡不那么顺利。很难用语言来解释它在做什么。
我尝试更改display
, max-height
, padding
,margin
但没有任何结果。也许我需要添加一些 JavaScript 而不是 CSS?任何可以指出的建议或问题都会很棒。
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #FFF;
margin-bottom: 210px;
border-radius: 5px;
}
#nav-container {
display: table;
margin: 10px auto;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
margin-top: -26px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
/* nav-dropdown */
#dropdown {
display: block;
position: absolute;
text-align: center;
width: 300px;
height: 50px;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
display: table-cell;
margin: 0;
cursor: pointer;
background-color: transparent;
text-align: center;
}
#extensions {
display: table;
border-collapse: separate;
border-spacing: 40px;
height: 50px;
width: 350px;
}
.label {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
text-align: center;
position: absolute;
width: 300px;
}
#dropdown-content {
position: absolute;
margin: 0 auto;
opacity: 0;
width: 300px;
height: 50px;
background-color: #C9C9C9;
border-radius: 8px;
box-shadow: 1px 1px 50px 0px white;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.nav-dropdown-container {width: 350px;height: 800px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown-content:hover {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
margin-top: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
#dropdown-content:hover p {
display: block;
text-decoration: none;
transition: 0.5s;
}
#dropdown-content p {display: none;}
#dropdown-link {color: white;}
#dropdown-link:link {
color: white;
text-decoration: none;
}
#dropdown-link:hover {
color: lightgrey;
}
<nav id="navigation">
<div id="nav-container">
<ul id="nav-items">
<li>
<div id="extensions">
<div class="nav-dropdown-container">
<div id="dropdown">
<p class="label">TEST</p>
<div id="dropdown-content">
<p><a id="dropdown-link" href="hello.html">HELLO</a></p>
<p><a id="dropdown-link" href="world.html">WORLD</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
解决方案
正如评论中所说,原因是当:hover
状态被触发时#dropdown-content
,鼠标光标快速进入和离开元素导致状态反复快速切换和关闭,从而导致过渡卡顿。
最快的解决方法是:您应该更改选择器,以便将:hover
状态绑定到标签和下拉内容的最近共同祖先,即#dropdown
.
所以你应该改变这个:
#dropdown-content:hover { ... }
#dropdown-content:hover p { ... }
...对此:
#dropdown:hover #dropdown-content { ... }
#dropdown:hover #dropdown-content p { ... }
这当然是一个权宜之计,因为我发现您的标记不必要地臃肿以实现简单的下拉效果。
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #FFF;
margin-bottom: 210px;
border-radius: 5px;
}
#nav-container {
display: table;
margin: 10px auto;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
margin-top: -26px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
/* nav-dropdown */
#dropdown {
display: block;
position: absolute;
text-align: center;
width: 300px;
height: 50px;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
display: table-cell;
margin: 0;
cursor: pointer;
background-color: transparent;
text-align: center;
}
#extensions {
display: table;
border-collapse: separate;
border-spacing: 40px;
height: 50px;
width: 350px;
}
.label {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
text-align: center;
position: absolute;
width: 300px;
}
#dropdown-content {
position: absolute;
margin: 0 auto;
opacity: 0;
width: 300px;
height: 50px;
background-color: #C9C9C9;
border-radius: 8px;
box-shadow: 1px 1px 50px 0px white;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.nav-dropdown-container {
width: 350px;
height: 800px;
}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown:hover #dropdown-content {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
margin-top: 50px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
#dropdown:hover #dropdown-content p {
display: block;
text-decoration: none;
transition: 0.5s;
}
#dropdown-content p {
display: none;
}
#dropdown-link {
color: white;
}
#dropdown-link:link {
color: white;
text-decoration: none;
}
#dropdown-link:hover {
color: lightgrey;
}
<nav id="navigation">
<div id="nav-container">
<ul id="nav-items">
<li>
<div id="extensions">
<div class="nav-dropdown-container">
<div id="dropdown">
<p class="label">TEST</p>
<div id="dropdown-content">
<p><a id="dropdown-link" href="hello.html">HELLO</a></p>
<p><a id="dropdown-link" href="world.html">WORLD</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
推荐阅读
- latex - 如何在表格中添加垂直线?
- json - 无法将 json 转换为 csv
- python - 生成器上的列表函数删除元素
- java - 无法通过 phoenix 从 hbase 上的现有表中读取数据
- compression - 对二进制数据使用霍夫曼编码时,字符是如何确定的?
- bash - 解析命令的输出并存储在变量中
- javascript - r.body.find 不是函数 - snekfetch
- angularjs - Angularjs 承诺?
- reactjs - 我可以在使用 Firebase 身份验证时修复“无法在现有状态转换期间更新”错误吗?
- xcode - 如何将颤振应用程序从 android studio 导出到 Xcode?