首先这是fiddle
只是一个常规的引导下拉菜单,我对 css 做了一些更改,以便下拉菜单出现在悬停(而不是单击)上,但我如何想要一个非常简单的淡入淡出动画。我尝试了 css 转换,但它不起作用,因为 .dropdown-menu 元素应用了“display: none”,悬停时它会更改为“display: block”。如何对从“diplay: none”更改为“display: block”的元素进行动画处理,或者是否有其他方法可以实现此目的?
我已经用谷歌搜索过这个并找到了一些答案,但他们没有帮助。
HTML 代码:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
CSS代码:
.dropdown .dropdown-menu{
opacity: 0;
transition: all 400ms ease;
-moz-transition: all 400ms ease;
-webkit-transition: all 400ms ease;
-o-transition: all 400ms ease;
-ms-transition: all 400ms ease;
}
.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
}
.dropdown .dropdown-menu {
display: block;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
}
.dropdown:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
.dropdown {
display: inline-block;
}
只需添加display:block
and visibility:hidden;
to .dropdown .dropdown-menu {
。
然后加visibility: visible
to .dropdown:hover .dropdown-menu {
你就完成了。
您需要更改可见性,因为下拉菜单的不透明度为 0,但它仍然存在。您可以通过将鼠标悬停在按钮下方来检查这一点。通过更改可见性,只有当按钮悬停时,下拉菜单才会出现。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)