在父悬停而不是父或子悬停上显示子答案

【问题标题】：Show child on parent hover instead of on parent OR child hover在父悬停而不是父或子悬停上显示子
【发布时间】：2017-11-21 23:09:39
【问题描述】：

我创建了一个简单的下拉菜单，当我将鼠标悬停在父列表项“服务”上时，它会缩放和淡入。一切正常，除了当我将鼠标悬停在子元素（下拉菜单）上时，它也会出现。我知道简单地用不透明度隐藏它不会阻止用户将鼠标悬停在它上面，但它允许 0.4 秒的过渡生效。如果我要使用 display:none 或 visibility:hidden 隐藏它，则过渡会立即生效。我正在考虑使用 jQuery 来解决这个问题，但想知道是否有纯粹基于 CSS 的解决方案。

JSFiddle

* {
  margin: 0;
  padding: 0;
  font-family: Montserrat;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

nav {
  background-color: white;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav > ul > li {
  display: inline-block;
  position: relative;
  height: 60px;
  cursor: pointer;
}

nav a {
  color: rgba(165,175,185,1);
}

nav > ul > li > a {
  padding: 0 20px;
  height: 100%;
  line-height: 60px;
}

nav > ul > li:hover > a {
  color: rgba(105,115,125,1);
}

nav > ul > li:first-of-type {
  margin-right: auto;
}

.services-list-container {
  position: absolute;
  width: 200px;
  top: 100%;
  height: auto;
  opacity: 0;
  transform: rotateX(-20deg) scale(0.9,0.9);
	transform-origin: 0 0;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.services-list-container ul {
  background-color: white;
  box-shadow: 0 6px 16px rgba(40, 40, 90, 0.15);
  position: relative;
  margin-top: 30px;
}

.services-list-container a {
  padding: 20px;
  display: block;
}

.services-list-container a:hover {
  padding: 20px;
  display: block;
  background-color: rgba(235,240,245,1);
}
  
.hover:hover .services-list-container {
  transform: rotateX(0deg) scale(1,1);
	opacity: 1;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

<nav>
  <ul>
    <li>
      <a href="#">[Logo]</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li class="hover">
      <a href="#">Services</a>
      <div class="services-list-container">
        <ul>
          <li>
            <a href="#">Information</a>
          </li>
          <li>
            <a href="#">Technology</a>
          </li>
          <li>
            <a href="#">Training</a>
          </li>
          <li>
            <a href="#">Project Support</a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

【问题讨论】：

标签： html css drop-down-menu hover transition

【解决方案1】：

请检查这是否是您想要的。子菜单在悬停之前一直隐藏。

* {
  margin: 0;
  padding: 0;
  font-family: Montserrat;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

nav {
  background-color: white;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav>ul>li {
  display: inline-block;
  position: relative;
  height: 60px;
  cursor: pointer;
}

nav a {
  color: rgba(165, 175, 185, 1);
}

nav>ul>li>a {
  padding: 0 20px;
  line-height: 60px;
}

nav>ul>li:hover>a {
  color: rgba(105, 115, 125, 1);
}

nav>ul>li:hover .services-list-container  {
  display: inline-block;
}

nav>ul>li:first-of-type {
  margin-right: auto;
}

.services-list-container {
  visibility: hidden;
  z-index: -1;
  position: absolute;
  width: 200px;
  top: 100%;
  opacity: 0;
  transition: opacity .4s ease;
}

.services-list-container ul {
  background-color: white;
  box-shadow: 0 6px 16px rgba(40, 40, 90, 0.15);
  position: relative;
}

.services-list-container a {
  padding: 20px;
  display: block;
}

.services-list-container a:hover  {
  background-color: rgba(235, 240, 245, 1);
}

.hover:hover .services-list-container {
  z-index: 0;
  visibility: visible;
  opacity: 1;
}

<nav>
  <ul>
    <li>
      <a href="#">[Logo]</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li class="hover">
      <a href="#">Services</a>
      <div class="services-list-container">
        <ul>
          <li>
            <a href="#">Information</a>
          </li>
          <li>
            <a href="#">Technology</a>
          </li>
          <li>
            <a href="#">Training</a>
          </li>
          <li>
            <a href="#">Project Support</a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>

【讨论】：

【解决方案2】：

可见性的组合：隐藏；不透明度更改可帮助您保留该动画，同时仍防止其在预期菜单区域之外触发：

https://jsfiddle.net/4wg4sbqy/ CSS：

* {
      margin: 0;
      padding: 0;
      font-family: Montserrat;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    nav {
      background-color: white;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    nav > ul > li {
      display: inline-block;
      position: relative;
      height: 60px;
      cursor: pointer;
    }

    nav a {
      color: rgba(165,175,185,1);
    }

    nav > ul > li > a {
      padding: 0 20px;
      height: 100%;
      line-height: 60px;
    }

    nav > ul > li:hover > a {
      color: rgba(105,115,125,1);
    }

    nav > ul > li:first-of-type {
      margin-right: auto;
    }

    .services-list-container {
      position: absolute;
      width: 200px;
      top: 100%;
      height: auto;
      opacity: 0;
      visibility: hidden;
      transform: rotateX(-20deg) scale(0.9,0.9);
        transform-origin: 0 0;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .services-list-container ul {

      background-color: white;
      box-shadow: 0 6px 16px rgba(40, 40, 90, 0.15);
      position: relative;
      margin-top: 30px;
    }

    .services-list-container a {
      padding: 20px;
      display: block;
    }

    .services-list-container a:hover {
      padding: 20px;
      display: block;
      background-color: rgba(235,240,245,1);
    }

    .hover:hover .services-list-container {
      visibility: visible;
      transform: rotateX(0deg) scale(1,1);
        opacity: 1;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

HTML：

   <nav>
  <ul>
    <li>
      <a href="#">[Logo]</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li class="hover">
      <a href="#">Services</a>
      <div class="services-list-container">
        <ul>
          <li>
            <a href="#">Information</a>
          </li>
          <li>
            <a href="#">Technology</a>
          </li>
          <li>
            <a href="#">Training</a>
          </li>
          <li>
            <a href="#">Project Support</a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

【讨论】：

我试过了，但退出转换仍然是瞬时的，这很奇怪。也许我在某个地方遇到了另一个错误，但我很确定我没有。
@Nolder 你说得对，退出转换似乎仍然是瞬时的。对于两种方式的动画，在这种情况下我可能会使用 jQuery，但如果仅在初始下拉菜单中使用动画或作为后备是可以接受的，那么它肯定是一个选项。

【解决方案3】：

如果您的目标是支持浏览器，您可以使用pointer-events 来防止子菜单导致鼠标悬停事件

给你的元素pointer-events:none 禁用

.services-list-container {
  pointer-events:none;
  position: absolute;
  width: 200px;
  top: 100%;
  height: auto;
  opacity: 0;
  transform: rotateX(-20deg) scale(0.9,0.9);
  transform-origin: 0 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

然后为确保您仍然可以进入子菜单，请在 .hover 元素悬停时重置 pointer-events

.hover:hover .services-list-container {
  pointer-events:all;
  transform: rotateX(0deg) scale(1,1);
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

演示

* {
  margin: 0;
  padding: 0;
  font-family: Montserrat;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

nav {
  background-color: white;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav > ul > li {
  display: inline-block;
  position: relative;
  height: 60px;
  cursor: pointer;
}

nav a {
  color: rgba(165,175,185,1);
}

nav > ul > li > a {
  padding: 0 20px;
  height: 100%;
  line-height: 60px;
}

nav > ul > li:hover > a {
  color: rgba(105,115,125,1);
}

nav > ul > li:first-of-type {
  margin-right: auto;
}

.services-list-container {
  pointer-events:none;
  position: absolute;
  width: 200px;
  top: 100%;
  height: auto;
  opacity: 0;
  transform: rotateX(-20deg) scale(0.9,0.9);
	transform-origin: 0 0;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.services-list-container ul {
  background-color: white;
  box-shadow: 0 6px 16px rgba(40, 40, 90, 0.15);
  position: relative;
  margin-top: 30px;
}

.services-list-container a {
  padding: 20px;
  display: block;
}

.services-list-container a:hover {
  padding: 20px;
  display: block;
  background-color: rgba(235,240,245,1);
}
  
.hover:hover .services-list-container {
  pointer-events:all;
  transform: rotateX(0deg) scale(1,1);
	opacity: 1;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

<nav>
  <ul>
    <li>
      <a href="#">[Logo]</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li class="hover">
      <a href="#">Services</a>
      <div class="services-list-container">
        <ul>
          <li>
            <a href="#">Information</a>
          </li>
          <li>
            <a href="#">Technology</a>
          </li>
          <li>
            <a href="#">Training</a>
          </li>
          <li>
            <a href="#">Project Support</a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

【讨论】：

有趣！我不知道有这样的财产。尽管它运行良好，但不幸的是，我需要迎合比目前支持的浏览器更多的浏览器。感谢您的洞察力！

【解决方案4】：

不是你悬停在子元素上，而是你的列表元素距离 height:60px 太高了，当你悬停在单词下面时，它仍然在 li 元素上。

【讨论】：

正确，我忘了说。但是我尝试重写它，以便在将鼠标悬停在列表项中的元素上时出现子菜单，但没有成功。那是因为一个元素不能在悬停时影响它的兄弟姐妹吗？
哦，我明白我的高度是错误的，出于某种原因，我认为 60px 比那个高。让我尝试一些方法。