Question

所以我有一个导航栏，当我将其悬停在导航栏上时会显示下拉菜单

       <li>
        <Link
          to='/'
          className='nav-links'
          onClick={() => setClick(false)}
          onMouseEnter={() => setDropdown(true)}
          onMouseLeave={() => setDropdown(false)}
        >
          Home
        </Link>
        {dropdown && <Dropdown />}
      </li>

我的问题是，当我尝试将鼠标悬停在实际的下拉菜单上时，它消失了，因为onMouseEnter仅在<Link>标签上设置了

这是下拉组件代码

      function Dropdown() {
        return (
          <>
            <ul className='dropdown-menu'>
              {MenuItems.map((item, index) => {
                return (
                  <li key={index}>
                    <a className={item.cName} href={item.url}>
                      {item.title}
                    </a>
                  </li>
                );
              })}
            </ul>
          </>
        );
      }

      export default Dropdown;

显示下拉菜单的CSS

      .dropdown-menu {
        background: red;
        width: 200px;
        position: absolute;
        top: 80px;
        list-style: none;
      }

      .dropdown-menu li {
        background: yellow;
        padding: 16px;
      }

当我将鼠标悬停在<Link>标记上时，如何防止下拉菜单消失？

Answer 1

我认为您应该将props的Dropdown组件传递给调用setDropdown(true)的函数和调用setDropdown(false)的函数。然后在Dropdown组件中，从props获取功能，并在mouseEnter和mouseLeave上调用它们。

Answer 2

如果您希望这样做，则应将onMouseEnter和onMouseLeave分配给“ li”标签。否则它将无法正常工作，因为您用鼠标离开了链接区域。

当我将鼠标悬停在菜单上时，如何防止React下拉菜单消失？

2 个答案: