为什么悬停效果可以在不将鼠标悬停在悬停文本上的情况下工作？

时间：2021-02-18 08:19:36

标签： html css menu hover dropdown

我创建了一个下拉菜单。在这里，我的问题出在作品集部分。当我将鼠标悬停在投资组合上时，会出现一个下拉菜单。然后当我将鼠标悬停在第一个下拉菜单文本上时，应该会出现另一个子下拉菜单，但这里其他下拉菜单的所有子下拉菜单都一个一个出现。

另一个问题出现在联系人部分。在这里，问题是如果我在每个下拉菜单之间使用一个小的下边距，然后在“联系人”文本上悬停后，下拉图标就会出现，当我将鼠标从文本移动到下拉图标时，下拉菜单消失了。< /p>

这是我的完整代码：

/* menu part */

.menu {
  text-align: center;
}

.menu ul {
  list-style: none;
}

.menu ul li {
  display: inline-block;
  background: #545454;
  color: white;
  padding: 15px 55px;
  margin-left: -5px;
  border-left: 1px solid black;
  font-family: 'Balsamiq Sans', cursive;
  font-size: 18px;
  position: relative;
}

.menu ul li i {
  position: relative;
  right: 10px;
}

.menu ul li:hover {
  background-color: rgb(216, 49, 49);
  transition: .8s;
  cursor: pointer;
}


/* dropdown menu part */


/* contact part */

.menu ul li .contact {
  position: absolute;
  left: 38px;
  top: 100%;
  width: 0px;
  display: inline-block;
  padding: 0;
}

.menu ul li .contact li {
  width: 0px;
  display: inline-block;
  line-height: 16px;
  border-radius: 50%;
  visibility: hidden;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
}

.menu ul li .contact li i {
  font-size: 50px;
  position: relative;
  top: 0px;
  right: 25px;
}

.menu ul li .contact li:first-child:hover {
  background-color: royalblue;
}

.menu ul li .contact li:nth-child(2):hover {
  background-color: rgb(190, 201, 37);
}

.menu ul li .contact li:nth-child(3):hover {
  background-color: rgb(228, 22, 22);
}

.menu ul li .contact li:nth-child(4):hover {
  background-color: rgb(1, 130, 250);
}

.menu ul li .contact li:last-child:hover {
  background-color: rgb(66, 110, 241);
}

.menu ul li:hover ul li {
  visibility: visible;
  opacity: 1;
  transition: .5s;
  transform: scaleY(1);
  cursor: pointer;
}


/* portfolio part */

.menu ul li .portfolio {
  position: absolute;
  top: 100%;
  left: 0px;
  padding: 0;
  margin-left: 5px;
}

.menu ul li .portfolio li {
  width: 84px;
  position: relative;
}

.menu ul li .portfolio li ul {
  position: absolute;
  left: 100%;
  top: 0px;
  padding: 0;
}

.menu ul li .portfolio li ul li {
  visibility: hidden;
  opacity: 0;
  margin-left: 0px;
  transform: scaleX(0);
  transform-origin: center;
}

.menu ul li .portfolio li:hover ul li {
  visibility: visible;
  opacity: 1;
  transform: scaleX(1);
  transition: .8s;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Menu</title>
  <link rel="stylesheet" href="./dropdown menu.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital@1&display=swap" rel="stylesheet">

</head>

<body>
  <div class="menu">
    <ul>
      <li><i class="fas fa-home"></i>Home</li>
      <li><i class="fas fa-female"></i>About</li>
      <li><i class="fas fa-user-edit"></i>Contact
        <ul class="contact">
          <li><i class="fab fa-facebook-f"></i></li>
          <li><i class="fab fa-instagram"></i></li>
          <li><i class="fab fa-youtube"></i></li>
          <li><i class="fab fa-twitter"></i></li>
          <li><i class="fab fa-linkedin-in"></i></li>
        </ul>
      </li>
      <li><i class="fab fa-wordpress-simple"></i>Portfolio
        <ul class="portfolio">
          <li>Work no 1
            <ul>
              <li>sample 1</li>
              <li>sample 2</li>
            </ul>
          </li>
          <li>Work no 2
            <ul>
              <li>sample 1</li>
              <li>sample 2</li>
            </ul>
          </li>
          <li>Work no 3
            <ul>
              <li>sample 1</li>
              <li>sample 2</li>
            </ul>
          </li>
          <li>Work no 4
            <ul>
              <li>sample 1</li>
              <li>sample 2</li>
            </ul>
          </li>
          <li>Work no 5
            <ul>
              <li>sample 1</li>
              <li>sample 2</li>
            </ul>
          </li>
        </ul>
      </li>
      <li><i class="fas fa-sign-in-alt"></i>Login</li>
    </ul>
  </div>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

因为你没有使用经典的 display:none/block ，你的隐藏元素在这里使用作为父元素一部分的空间。当您悬停这些空间时，您将悬停父级 .. :hover 已应用。

为了避免 display:none/block;，您可以在 ul 子节点上使用 pointer-events:none/auto;。

这是您的代码示例。

/* menu part */

.menu {
  text-align: center;
}

.menu ul {
  list-style: none;
}

.menu ul li {
  display: inline-block;
  background: #545454;
  color: white;
  padding: 15px 55px;
  margin-left: -5px;
  border-left: 1px solid black;
  font-family: 'Balsamiq Sans', cursive;
  font-size: 18px;
  position: relative;
}

.menu ul li i {
  position: relative;
  right: 10px;
}

.menu ul li:hover {
  background-color: rgb(216, 49, 49);
  transition: .8s;
  cursor: pointer;
}


/* dropdown menu part */


/* contact part */

.menu ul li .contact {
  position: absolute;
  left: 38px;
  top: 100%;
   
  display: inline-block;
  padding: 0;
}

.menu ul li .contact li {
  width: 0px;
  display: inline-block;
  line-height: 16px;
  border-radius: 50%;
  visibility: hidden;
  opacity: 0;
  transform: scaleY(0) translate(-1em);
  transform-origin: top;
  }
  .menu ul li .contact li ul {
  /* added */ pointer-events: none;  
}

.menu ul li .contact li i {
  font-size: 50px;
  position: relative;
  top: 0px;
  right: 25px;
}

.menu ul li .contact li:first-child:hover {
  background-color: royalblue;
}

.menu ul li .contact li:nth-child(2):hover {
  background-color: rgb(190, 201, 37);
}

.menu ul li .contact li:nth-child(3):hover {
  background-color: rgb(228, 22, 22);
}

.menu ul li .contact li:nth-child(4):hover {
  background-color: rgb(1, 130, 250);
}

.menu ul li .contact li:last-child:hover {
  background-color: rgb(66, 110, 241);
}

.menu ul li:hover .contact  li {
  visibility: visible;
  opacity: 1;
  transition: .5s;
  transform: scaleY(1) translate(-1em);
  cursor: pointer;
  }

.menu ul li:hover ul {
  /* added */ pointer-events: auto;
 
}


/* portfolio part */

.menu ul li .portfolio {
  position: absolute;
  top: 100%;
  left: 0px;
  padding: 0;
  margin-left: 5px;
}

.menu ul li .portfolio li {
  width: 84px;
  position: relative;
}

.menu ul li .portfolio li ul {
  position: absolute;
  left: 100%;
  top: 0px;
  padding: 0;
  /* added */ pointer-events: none;
}

.menu ul li .portfolio li ul li {
  visibility: hidden;
  opacity: 0;
  margin-left: 0px;
  transform: scaleX(0);
  transform-origin: center;
}

.menu ul li .portfolio li:hover ul li {
  visibility: visible;
  opacity: 1;
  transform: scaleX(1);
  transition: .8s;
  /* added */ pointer-events: auto;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Menu</title>
  <link rel="stylesheet" href="./dropdown menu.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital@1&display=swap" rel="stylesheet">

</head>

<body>
  <div class="menu">
    <ul>
      <li><i class="fas fa-home"></i>Home</li>
      <li><i class="fas fa-female"></i>About</li>
      <li><i class="fas fa-user-edit"></i>Contact
        <ul class="contact">
          <li><i class="fab fa-facebook-f"></i></li>
          <li><i class="fab fa-instagram"></i></li>
          <li><i class="fab fa-youtube"></i></li>
          <li><i class="fab fa-twitter"></i></li>
          <li><i class="fab fa-linkedin-in"></i></li>
        </ul>
      </li>
      <li><i class="fab fa-wordpress-simple"></i>Portfolio
        <ul class="portfolio">
          <li>Work no 1
            <ul>
              <li>sample 1</li>
              <li>sample 2</li>
            </ul>
          </li>
          <li>Work no 2
            <ul>
              <li>sample 1</li>
              <li>sample 2</li>
            </ul>
          </li>
          <li>Work no 3
            <ul>
              <li>sample 1</li>
              <li>sample 2</li>
            </ul>
          </li>
          <li>Work no 4
            <ul>
              <li>sample 1</li>
              <li>sample 2</li>
            </ul>
          </li>
          <li>Work no 5
            <ul>
              <li>sample 1</li>
              <li>sample 2</li>
            </ul>
          </li>
        </ul>
      </li>
      <li><i class="fas fa-sign-in-alt"></i>Login</li>
    </ul>
  </div>
</body>

</html>

相关问题
最新问题