Question

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

我希望导航栏从开始就一直淡出，除非我用鼠标悬停它，我想让它淡入并显示。我怎么能这样做？

$pdf->MultiCell( 200, 40, $address, 1);

Answer 1

您正在寻找opacity（opacity - CSS）财产。它允许您设置元素的不透明度而不会丢失其尺寸。接下来，您只需transition :hover在.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>

[nodemon] starting `babel-node server.js server.js`
/home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
        throw e;
        ^

TypeError: Cannot read property 'loose' of undefined (While processing preset: "/home/vagrant/api/node_modules/@babel/preset-env/lib/index.js")
    at _default (/home/vagrant/api/node_modules/@babel/plugin-transform-modules-commonjs/lib/index.js:19:22)
    at Function.memoisePluginContainer (/home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:113:13)
    at Function.normalisePlugin (/home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:146:32)
    at /home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
    at Array.map (native)
    at Function.normalisePlugins (/home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at /home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at /home/vagrant/api/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (native)

这里是一个轻松搞乱代码的JS Bin：JS Bin

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

我做对了吗？

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

1 个答案: