时间戳

首页 > 解决方案 > 悬停时折叠 Django NavBar（鼠标移出）

html - 悬停时折叠 Django NavBar（鼠标移出）

问题描述

我需要在鼠标移出时隐藏 django 应用导航栏并在鼠标悬停时显示，就像在1中一样。django 应用程序正在使用 Bootstrap4。根据 W3School BootStrap4 有 .collapse class 2。从 BootStrap4 的角度来看，我仍然在想我可以将折叠类与悬停一起使用。另一方面，通过仅使用 css，我在3中进行了第一次尝试。

HTML

  <div id="nav_general">
            <nav id="navbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            </nav>
  </div>

CSS

.home #navbar {
      display: flex;
      transform: translateY(-100%);
    }
    
    .home #nav_general:hover #navbar {
      transform: translateY(0);
    }

在CSS配置中，导航栏永远隐藏，鼠标悬停时不会展开。谁能指出导航栏永远隐藏的原因以及如何让它在鼠标悬停时展开？我如何通过使用BootStrap4 class=collapse来实现相同的目标？

标签： htmljquerycssdjangobootstrap-4

解决方案

推荐阅读