滚动到元素

Question

我正在使用容器触发鼠标悬停时的不透明度变化。问题是，如果某人有稳定的手并且他只是向下滚动页面，即使鼠标在该元素上，但技术上它没有移动，也不会触发悬停效果。

如果移动鼠标，则会触发效果，但如果滚动开始时鼠标位置在元素之外，则不会触发效果。

如何解决此问题，以便只要鼠标箭头位于该元素上就会触发效果？

.nav-bar {
    .nav-wrapper-overlay {
      position: absolute;
      background: rgba(255, 255, 255, 1);
      opacity: 0.4;
      transition: all 0.6s ease-out;
    }

    &:hover .nav-wrapper-overlay {
      opacity: 0;
    }
  }

 <div className="nav-bar">
     <div className="nav-wrapper-overlay" />
 </div>