Javascript 鼠标悬停时如何淡出导航栏和淡入导航栏

因此，我对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"/>'>&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>

切换导航
顶级链接

---

您正在查找

不透明度

（）属性。它允许您设置元素的不透明度，而不会丢失其尺寸。接下来，您只需在

：hover

上从一种状态过渡到另一种状态。在底部查看一些参考资料

下面是完整的代码：

.navbar.container流体{
不透明度：0；/*默认情况下不显示*/
过渡：all.2s；/*选择最适合的*/
}
.导航栏：悬停。容器流体{
不透明度：1；/*完全可见于：悬停*/
过渡：all.2s；
}

切换导航
顶级链接

：在

之前和：在csstry CSS转换之后，一旦您将CSS添加到问题中，我将提供帮助是的，这完全帮助了我！谢谢你