html + CSS：如何使网页中的某个部分不可见，并在覆盖该部分时显示？ [关闭]

问题描述 投票：0回答：2

如何在不使用导航栏时（不将其悬停时）使其不可见，从而使其仅在将鼠标悬停在其上时才显示这是带有html和css的页面。仅当我将鼠标悬停在导航部分（导航元素占据的蓝绿色区域）上时，如何显示它link to page

nav {background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
      width:20em;
}
<!DOCTYPE html>
<html lang="en">
   <head>
     <meta charset="UTF-8">
     <title>My Favorite Recipes</title>
   </head>
   <body>
    <header> <h1>My Favorite Recipes</h1></header>
<nav>     <ul>
       <a href="#"><li>1</li></a>
       <a href="#"><li>2</li></a>
        <a href="#"><li>3</li></a>
     </ul>
</nav>
     
    
   </body>
</html>
html css
2个回答
-1
投票

您可以使用负边距或相对位置，然后当它悬停时会返回。但是告诉我们您到底需要什么...任何CSS或...？

-1
投票

一种简单的解决方法是使用position: relative并将nav移至左侧，直到将鼠标悬停在上面：

nav {
  background: gray;
  position: absolute;
  left: -90vw;
}

nav:hover {
  top: 0px;
  left: 0px;
}

div.activator:hover + nav {
  left: 0px;
  top: 0px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div class="activator">
   NAV
  </div>
  <nav>
    <ul>
      <a href="#sh">
        <li>Shawarma</li>
      </a>
      <a href=#b>
        <li>Burger</li>
      </a>
      <a href="#c">
        <li>Chocolate chip cookies</li>
      </a>
    </ul>
  </nav>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.