时间戳

首页 > 解决方案 > 导航菜单的悬停问题

javascript - 导航菜单的悬停问题

问题描述

我的大型菜单导航存在悬停问题。它在悬停在不可见的子列表项上时激活（从下到上悬停，您会注意到此 codepen上的问题）。

这是触发悬停的 CSS 块：

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

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

标签： javascripthtmlcss

解决方案

您的子导航菜单正在占用空间，即使它不可见。这就是为什么当你悬停在它上面时你可以看到它。添加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 是不够的，您需要在悬停时同时更改 theheight和 the 。Hadi77padding提到了另一种方法，即将默认显示设置为，然后将其更改为。就像下面的例子一样。noneblock

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

推荐阅读