悬停时的侧边栏拖出.(最好是仅限 CSS)

我一直在业余

时间做一个网站，我似乎无法弄清楚如何像FontShop在他们的网站上那样进行导航：https://www.fontshop.com/确实如此，当您将鼠标悬停在他们的徽标上时，或者在我的情况下，一个空白矩形上，会出现侧边栏导航。最好我只想用 CSS3 创建它，但如果可以提出 jquery/js 建议，那么我也将使用它们。

谢谢！

您可以将徽标（作为图像或div）和导航div 放在一个公共容器中，并将：hover 应用于容器：

.HTML：

<body>
  <div id="container">
    <div id="navigation">
      <ul>
        <li>nav1</li>
        <li>nav2</li>
        <li>nav3</li>
      </ul>
    </div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/320px-Stack_Overflow_logo.svg.png" id="logo" alt="stackoverflow" />
  </div>
</body>

.CSS：

#navigation {
  width: 200px;
  height: 200px;
  background: yellow;
  display: none;
  float: left;
}
#logo {
  float: left;
}
#container:hover #navigation {
  display: block;
}

小提琴：https://jsfiddle.net/v71fgshe/

相关内容

最新更新

热门标签：