使用鼠标悬停事件显示飞出菜单-PHP中文网问答

我有一个弹出菜单，我试图使用鼠标悬停事件来切换它，但它似乎没有按预期工作。我尝试通过像这样定位 div 来使用 CSS 悬停事件： .hero-list-block a:hover + .flyout-menu

但是这没有用。关于如何解决这个问题/改进这个问题有什么建议吗？谢谢

const flyoutLink = document.querySelector('.flyout-link');
const flyoutMenu = document.querySelector('.flyout-menu');

flyoutLink.addEventListener('mouseover', () => {
  flyoutMenu.classList.toggle('.flyout-menu-show');
})

.grid-hero-wrapper {
  grid-template-columns: 100px 1fr;
  gap: 15px;
  margin-top: 15px;
  display: grid;
}

.hero-categories-block {
  background: #fff;
  border: 1px solid #28282b;
}

.hero-categories-list {
  display: flex;
  flex-direction: column;
  padding: 5px 0;
  height: 100%;
}

.flyout-menu-show {
  opacity: 1;
  visibility: visible;
}

.flyout-menu {
  background: #fff;
  border: 1px solid #28282b;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 999;
}

.hero-categories-list a {
  display: flex;
  align-items: center;
  flex-grow: 1;
  font-size: 0.75rem;
  height: 22px;
  color: #333;
}

.hero-slider-block {
  position: relative;
}



  
    
      Flyout
      Flyout
    
  
  
    
      
        
          
        
      
    
    
      This is my flyout menu