Question

我有一个奇怪的组合 - 视差和汉堡包菜单。问题是m 每当你将悬停的地方，导航正在下降，不仅如此当您将鼠标悬停在汉堡菜单图标上时。我认为这是一个厚厚的虫子代码，但我找不到它。我没有那个jquery。还有，我找不到任何paralax + hamburger菜单教程。我想做导航响应。

HTML 

<header>
  <nav>
    <a href="#" style="font-size: 40px; font-family:'Forte'; color: white; 
padding: 10px 30px; text-decoration:none; ">Vowel</a>
    <a href="#" style="float: right; padding: 10px 10px;">
    <img src="icon_menu.png"></img>
    </a>
    <ul>
      <li><a href="about_us.html">About us</a></li>
      <li><a href="#">Subscribe</a></li>
    </ul>
  </nav>
</header>

CSS

nav {
width: 100%;
height: 60px;
background-color: red;
position: fixed;
z-index: 100;
}

#menu-icon {
background-image: url("icon_menu.png");
display: hidden;
width: 32px;
height: 32px;
}

nav ul {
list-style-type: none;
position: fixed;
padding: 20px;
background: red;
width: 100%;
text-decoration: none;
color: white;
display: none; 
}

nav:active ul {
list-style-type: none;
display: none;
position: fixed;
padding: 20px;
background: red;
right: 0px;
top: 60px;
width: 100%;
text-decoration: none;
color: white;
border: 1px solid white;
}

nav:hover ul {
  display: block;
}

nav li {
  text-align: center;
  width: 100%;
  padding: 15px 0;
  margin: 0;
  text-decoration: none;
  color: white;
}

nav a:hover {
  text-decoration: none;
}


container {
max-width: 960px;
height: 500px;
margin: 0 auto;
background: #f9f9f9;
padding: 25px;
border-top: 1px solid black;
overflow: scroll;
}

Answer 1

问题是你的悬停元素获得全宽。因此，悬停动作应仅针对汉堡包菜单图标。

因此，在菜单图标上为该锚标记添加类，并使用该类可以触发悬停操作。

<a class="hamberger-menu" href="#" style="float: right; padding: 10px 10px;">
    <img src="icon_menu.png"></img>
</a>

还需要根据它更改CSS代码。

.hamberger-menu:hover~ul {
  display: block;
}

汉堡菜单+ paralax

1 个答案: