jquery - 隐藏导航栏直到鼠标悬停

Question

我试图隐藏一个导航栏(在一个名为 nav-container 的 div 中)，直到用户将鼠标悬停在它上面，在这种情况下它会滑出以显示自己。我在下面编写的 JQuery 代码似乎无法正常工作。非常感谢任何帮助!

HTML 导航栏代码:

<div class="nav-container">
    <nav id = 'navbar'>

        <div class="link-container ">
            <a href='#' class="nav-link">Home</a>
        </div>

        <div class="link-container">
            <a href='#' class="nav-link">FAQ</a>
        </div>
        <div class="link-container">
            <a href='#' class="nav-link">List a Coin</a>
        </div>

        <div class="link-container">
            <a href='#' class="nav-link">Contact Us</a>
        </div>
    </nav>
</div>

CSS 导航栏代码:

.nav-container{
    width: 110px;
    height: 230px;
    background-color: rgb(48, 162, 255);
    border: solid 2px none;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

#navbar{
    position: relative;
    margin: auto;
 }

.link-container {
    margin: 10px;
    font-size: 18px;
    width: 100%;
    color: white;
}

.nav-link{
    display:inline-block;
}

JQuery 代码:

var hovering = function(){
   $("nav").show("slide", { direction: "right" }, 1000);
};

var leaving = function(){
   $("nav").hide("slide", { direction: "left" }, 1000);
};

$("#nav-container").hover(hovering, leaving);

Answer 1

这是一个简单的例子。真正做这项工作的是:

#navbar { 
  transform: translateY(-100%); /* normal, hidden state */
}
...
.nav-container:hover #navbar {
  transform: translateY(0); /* when parent is hovered */
}

剩下的就是细节了。看到它工作:

#navbar {
  display: flex;
  background-color: black;
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
#navbar a {
    color: white;
    text-decoration: none;
}
#navbar > * {
  padding: 1rem;
}
body {
  margin: 0;
}
.nav-container:hover #navbar {
  transform: translateY(0);
}

<div class="nav-container">
    <nav id = 'navbar'>

        <div class="link-container ">
            <a href='#' class="nav-link">Home</a>
        </div>

        <div class="link-container">
            <a href='#' class="nav-link">FAQ</a>
        </div>
        <div class="link-container">
            <a href='#' class="nav-link">List a Coin</a>
        </div>

        <div class="link-container">
            <a href='#' class="nav-link">Contact Us</a>
        </div>
    </nav>
</div>

在您的示例中使用相同的技术:

.nav-container {
  width: 110px;
  height: 230px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

#navbar {
  background-color: rgb(48, 162, 255);
  border-radius: 0 8px 8px 0;
  transform: translateX(calc(-100% + 10px));
  transition: transform .4s cubic-bezier(.4, 0, .2, 1) .2s;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav-container:hover #navbar {
  transform: translateX(0);
  transition-delay: 0s;
}

#navbar {
  position: relative;
}

.link-container {
  font-size: 18px;
  width: 100%;
}

.link-container a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 6px 12px;
}

.link-container a:hover {
  text-decoration: underline;
  background-color: #ffffff21;
}

.nav-link {
  display: inline-block;
}

body {
  margin: 0;
}

.nav-container,
.nav-container * {
  box-sizing: border-box;
}

<div class="nav-container">
  <nav id='navbar'>
    <div class="link-container ">
      <a href='#' class="nav-link">Home</a>
    </div>

    <div class="link-container">
      <a href='#' class="nav-link">FAQ</a>
    </div>
    <div class="link-container">
      <a href='#' class="nav-link">List a Coin</a>
    </div>

    <div class="link-container">
      <a href='#' class="nav-link">Contact Us</a>
    </div>
  </nav>
</div>

冒昧地省略了一点，以宣传菜单的存在。