当鼠标悬停时，如何淡出导航栏并淡入导航栏

So I am pretty new to web application developing and I would like to know how I can achieve this question:

所以我对Web应用程序开发很新，我想知道如何实现这个问题：

I want the navbar to be faded out all the time from start except when I hover about it with the mouse I want it to fade in and show. How can I do that?

我希望导航栏从开始一直消失，除非我用鼠标悬停它，我希望它淡入并显示。我怎样才能做到这一点？

<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"/>'>&iexcl;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>

1 个解决方案

#1

You're looking for the opacity (opacity - CSS) property. It allows you to set opacity of an element without loosing its dimensions. Next you only have to transition form one state to another on :hover. Check at the bottom for some reference stuff.

您正在寻找不透明度（opacity - CSS）属性。它允许您设置元素的不透明度而不会丢失其尺寸。接下来，您只需要在一个状态转换为另一个状态：hover。在底部查看一些参考资料。

Here goes the full code :

这里是完整的代码：

.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"/>'>&iexcl;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>

And here is a JS Bin to mess with the code easily: JS Bin

Some reference about transitionning and the CSS used:

关于转换和使用的CSS的一些参考：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions
https://developer.mozilla.org/fr/docs/Web/CSS/opacity
https://developer.mozilla.org/fr/docs/Web/CSS/opacity
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

Did I get it right ?

我做对了吗？

#1