javascript - 导航菜单的悬停问题

Question

我的 super 菜单导航有一个悬停问题。当鼠标悬停在不可见的子列表项上时它会激活(鼠标从底部到顶部，您会注意到 this codepen 上的问题)。

这是触发悬停的 CSS block :

.nav:hover > li > .subnav-block {
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

我认为 JavaScript 解决方案会有所帮助，但首先尝试找到 CSS 解决方案。

Answer 1

您的子导航菜单正在占用空间，即使它不可见。这就是为什么只要将鼠标悬停在它上面就可以看到它的原因。将 height:0 添加到您的 .subnav-block 然后在悬停时将其设置回 auto 应该可以解决问题。您的 CSS 应该类似于下面的样式。

.subnav-block {
  position: static;
  display: block;
  width: 100% !important;
  top: 54px;
  left: 0;
  height: 0;
  overflow: hidden;
  background: gray;
  -webkit-transition: all 0.3s ease 0.15s;
  -moz-transition: all 0.3s ease 0.15s;
  -o-transition: all 0.3s ease 0.15s;
  -ms-transition: all 0.3s ease 0.15s;
  transition: all 0.3s ease 0.15s;
}

.nav:hover > li > .subnav-block {
  height: auto;
  visibility: visible;
  overflow: visible;
}

更新

如果你想给你的子导航菜单添加填充，将 height 设置为 0 是不够的，你需要同时更改 height 和悬停时的 padding。 Hadi77 提到的另一种方法是将默认显示设置为none，然后将其更改为block。就像下面的例子。

.subnav-block {
  position: static;
  width: 100% !important;
  top: 54px;
  left: 0;
  display: none;
  background: gray;
  -webkit-transition: all 0.3s ease 0.15s;
  -moz-transition: all 0.3s ease 0.15s;
  -o-transition: all 0.3s ease 0.15s;
  -ms-transition: all 0.3s ease 0.15s;
  transition: all 0.3s ease 0.15s;
}

.nav:hover > li > .subnav-block {
  display: block;
}

更新 2

由于 display 不允许我们使用转换，另一个解决方法是使用一些 JS。由于代码不多，这是实现这一目标的可靠方法。我们需要删除其中的 CSS hover。

JS

const nav = document.querySelectorAll('.nav > li');

nav.forEach(elem => {

  elem.addEventListener('mouseenter', () => {
    const subnav = document.querySelectorAll('.subnav-block');
    subnav.forEach(sub => {
      sub.classList.add('display-block');
      setTimeout( () => { 
        sub.style.opacity = 1;
        sub.style.height = 'auto';
      }, 100);
    });
  });

  elem.addEventListener('mouseleave', () => {
    const subnav = document.querySelectorAll('.subnav-block');
    subnav.forEach(sub => {
      sub.classList.remove('display-block');
      sub.style.opacity = 0;
    });
  });

});

CSS

.subnav-block {
  position: static;
  width: 100% !important;
  top: 54px;
  left: 0;
  display: none;
  opacity: 0;
  height: 0;
  background: gray;
  -webkit-transition: all 0.3s ease 0.15s;
  -moz-transition: all 0.3s ease 0.15s;
  -o-transition: all 0.3s ease 0.15s;
  -ms-transition: all 0.3s ease 0.15s;
  transition: all 0.3s ease 0.15s;
}

.display-block {
  display: block;
}