Question

我的超级菜单导航存在一个悬停问题。将鼠标悬停在不可见的子列表项上时会激活（从下到上悬停，您会在this codepen上注意到该问题）。

这是触发悬停的CSS块：

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

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

Answer 1

您的子导航菜单正在占用空间，即使它不可见。这就是为什么当您将鼠标悬停在其上方时都可以看到它的原因。将Foo(B)添加到height:0并在悬停时将其设置回.subnav-block即可解决问题。您的CSS应该看起来像下面的样子。

auto

更新

如果要将填充添加到子导航菜单中，将.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; }设置为0是不够的，并且需要同时更改height和height悬停时。 Hadi77 提到了另一种方法，即将默认显示设置为padding，然后将其更改为none。就像下面的示例一样。

block

更新2

由于.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; }不允许我们使用过渡，因此另一种解决方法是使用一点display。由于代码不多，因此是实现此目标的可靠方法。我们需要在此删除CSS JS。

JS

hover

CSS

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;
    });
  });

});

Answer 2

将visibility设置为hidden有点像是透明的：元素会按需占用空间（display设置为block）。

使用display属性是您想要的。当您希望元素“不显示”时将其设置为none，将其设置为block以“显示”。

此外，如果您不希望所有菜单都一起下拉，请将:hover中的.nav:hover > li > .subnav-block伪选择器移动到li，这样它将变成.nav > li:hover > .subnav-block

导航菜单的悬停问题

2 个答案: