所以我对 Web 应用程序开发还很陌生，我想知道如何解决这个问题:
我希望导航栏从一开始就一直淡出，除非我用鼠标悬停在它上面时我希望它淡入并显示。 我该怎么做？
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href='#'>My Spring App</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#side-navbar-collapse">
<span class="sr-only">Top Links</span>
<span class="glyphicon glyphicon-globe"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-left collapse navbar-collapse" id="main-navbar-collapse">
<li class="menu-item"><a href='<c:url value="/"/>'>Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-hover="dropdown">Hello <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href='<c:url value="/hello?choice=World"/>'>World</a></li>
<li><a href='<c:url value="/hello?choice=Kitty"/>'>Kitty</a></li>
<li class="dropdown-submenu">
<a href="#">Languages</a>
<ul class="dropdown-menu">
<!-- Third level list items on submenu -->
<li><a href='#'>Bonjour</li>
<!-- Example of conditionally enabling an item based on user role -->
<sec:authorize access="hasRole('ROLE_USER')">
<li><a href='<c:url value="/hello?choice=Guten%20Tag"/>'>Guten Tag</a></li>
</sec:authorize>
<sec:authorize access="!hasRole('ROLE_USER')">
<li class="disabled"><a href="#">Guten Tag</a></li>
</sec:authorize>
<li class="divider"></li>
<li><a href='<c:url value="/hello?choice=Hola"/>'>¡Hola!</a></li>
<li><a href='<c:url value="/hello?choice=Konnichiwa"/>'>Konnichiwa</a></li>
<li><a href='<c:url value="/hello?choice=Mabuhay"/>'>Mabuhay!</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-hover="dropdown">Goodbye <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href='<c:url value="/goodbye/Cruel%20World"/>'>Cruel world</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-hover="dropdown">FCM <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href='<c:url value="/fcm/?choice=Screen1"/>'>Screen1</a></li>
<li><a href='<c:url value="/fcm/?choice=Screen2"/>'>Screen2</a></li>
</ul>
</li>
</ul>
最佳答案
您正在寻找 opacity ( opacity - CSS ) 属性。它允许您设置元素的不透明度而不会丢失其尺寸。接下来，您只需在:hover 上transition 从一种状态到另一种状态。在底部查看一些引用资料。
完整代码如下:
.navbar .container-fluid {
opacity: 0; /*it doesn't show by default*/
transition: all .2s; /*pick whatever suits best*/
}
.navbar:hover .container-fluid {
opacity: 1; /*fully visible on :hover*/
transition: all .2s;
}<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href='#'>My Spring App</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#side-navbar-collapse">
<span class="sr-only">Top Links</span>
<span class="glyphicon glyphicon-globe"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-left collapse navbar-collapse" id="main-navbar-collapse">
<li class="menu-item"><a href='<c:url value="/"/>'>Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-hover="dropdown">Hello <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href='<c:url value="/hello?choice=World"/>'>World</a></li>
<li><a href='<c:url value="/hello?choice=Kitty"/>'>Kitty</a></li>
<li class="dropdown-submenu">
<a href="#">Languages</a>
<ul class="dropdown-menu">
<!-- Third level list items on submenu -->
<li><a href='#'>Bonjour</li>
<!-- Example of conditionally enabling an item based on user role -->
<sec:authorize access="hasRole('ROLE_USER')">
<li><a href='<c:url value="/hello?choice=Guten%20Tag"/>'>Guten Tag</a></li>
</sec:authorize>
<sec:authorize access="!hasRole('ROLE_USER')">
<li class="disabled"><a href="#">Guten Tag</a></li>
</sec:authorize>
<li class="divider"></li>
<li><a href='<c:url value="/hello?choice=Hola"/>'>¡Hola!</a></li>
<li><a href='<c:url value="/hello?choice=Konnichiwa"/>'>Konnichiwa</a></li>
<li><a href='<c:url value="/hello?choice=Mabuhay"/>'>Mabuhay!</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-hover="dropdown">Goodbye <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href='<c:url value="/goodbye/Cruel%20World"/>'>Cruel world</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-hover="dropdown">FCM <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href='<c:url value="/fcm/?choice=Screen1"/>'>Screen1</a></li>
<li><a href='<c:url value="/fcm/?choice=Screen2"/>'>Screen2</a></li>
</ul>
</li>
</ul>关于转换和使用的 CSS 的一些引用:
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions
- https://developer.mozilla.org/fr/docs/Web/CSS/opacity
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
我做对了吗？
关于javascript - 鼠标悬停时如何淡出导航栏并淡入导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47282532/