悬停时隐藏超级菜单 div |反应

Question

我正在为我的电子商务网站在 reactjs 框架中创建一个大型菜单。当我将鼠标悬停在列表项上时，它会显示大型菜单 div，但是当我向下移动光标时，菜单会自行隐藏。为什么它不保持原样？

在 onMouseEnter 和 onMouseLeave 上控制菜单显示状态的本地状态效果很好。

const [visible, setVisible] = useState(false);

  const showMenu = () => {
    setVisible(true);
  };

  const hideMenu = () => {
    setVisible(false);
  };

<li className="mega-drop-down collapsed">
                  <a
                    className="accord-icon"
                    onMouseEnter={showMenu}
                    onMouseLeave={hideMenu}
                  >
                    WHAT WE DO
                  </a>
                  <div
                    className="animated fadeIn mega-menu"
                    style={{ display: visible ? "block" : "none" }}
                  >
                    <div className="mega-menu-wrap">
                      <div className="row-t">
                        <div className="col-md-8">
                          <h4 className="row-t mega-title title1">
                            <a> Translation Services</a>
                          </h4>
                          <div className="border-line title1">
                            <div className="row-t">
                              <ul className="stander">
                                <div className="col-md-4">
                                  <li>
                                    <a> Supported languages</a>
                                  </li>
                                </div>
                                <div className="col-md-4">
                                  <li>
                                    <a> Translation Cost</a>
                                  </li>
                                </div>                               
                              </ul>
                            </div>
                            <div className="row-t">
                              <div className="col-md-4">
                                <h4 className="row-t mega-title title2">
                                  Areas of Expertise
                                </h4>
                                <div className="border-line title2">
                                  <ul className="stander">
                                    <li>
                                      <a> Document</a>
                                    </li>
                                    <li>
                                      <a> Legal</a>
                                    </li>                                   
                                    <li>
                                      <a> Technical</a>
                                    </li>                                   
                                  </ul>
                                </div>
                              </div>
                              <div className="col-md-4">
                                <h4 className="row-t mega-title title2">
                                  Localization
                                </h4>
                                <div className="border-line title2">
                                  <ul className="stander">                                   
                                    <li>
                                      <a> Mobile App</a>
                                    </li>
                                    <li>
                                      <a> Software</a>
                                    </li>
                                    <li>
                                      <a> Medical</a>
                                    </li>
                                  </ul>
                                </div>
                              </div>                              
                            </div>
                          </div>
                        </div>                        
                      </div>
                    </div>
                  </div>
                </li>

Answer 1

因为您将函数放在“a”元素上，所以当您离开该元素时，onMouseLeave 函数会运行。

您应该将这些功能放在“大型下拉”元素上

另外，如果你知道 CSS，你可以非常简单地做到这一点

.mega-drop-down:not(:hover) .mega-menu{
   display:none;
}

<ul>
  <li class="mega-drop-down collapsed">
     <a class="accord-icon" >WHAT WE DO </a>
        <div class="animated fadeIn mega-menu" >
                    Mega Menu
       </div>
   </li>
</ul>

悬停时隐藏超级菜单 div |反应

Mega menu div hides on hover | reactjs

html

javascript

css

megamenu

reactjs