悬停时顶部导航栏下拉菜单消失得太快 React答案

【问题标题】：topnavbar dropdown on hover dissapears too quickly React悬停时顶部导航栏下拉菜单消失得太快 React
【发布时间】：2019-05-20 21:26:04
【问题描述】：

好的，我是 css 样式的新手，因为我通常在后端工作更多。我正在使用 react 设计一个网站，我遇到了一个相当常见的问题，当我尝试将鼠标悬停在导航栏项目上时，下拉菜单显示但消失得太快。

我浏览了 stackoverflow 的问题，但似乎没有一个有效。这是我的navitem.js 的代码：

import React from "react";
import "./NavBarItem.css";
import { IoIosArrowDown } from "react-icons/io";
const NavBarItem = props => {
  let navItem = (
    <div className="navitem">
      {props.icon}
      {props.navtext}
    </div>
  );

  if (props.dropdownItems) {
    navItem = (
      <div className="navitem">
        <button className="dropdownbutton">
          {" "}
          {props.icon}
          {props.navtext}
          <IoIosArrowDown className="dropdownicon" />
        </button>
        <div className="dropdownitems">
          {props.dropdownItems.map(dropdownItem => (
            <div className="dropdownitem" key={dropdownItem.key}>
              {dropdownItem.text}
            </div>
          ))}
        </div>
      </div>
    );
  }

  return navItem;
};

export default NavBarItem;

还有我的navitem.css：

.navitem {
    display: inline-block;
    margin : 15px;
    cursor : pointer;
}

.icon {
    position : relative;
    top : 2px;
    right : 5px;
}

.dropdownicon {
    position : relative;
    top : 4px;
    left : 5px;
}

.dropdownitems {
    display: none;
    position : absolute;
    top : 55px;
    margin-left: -35px;
    background : linear-gradient(to right bottom, rgba(99, 25, 12, 0.8), rgba(226, 13, 13, 0.8));
    color : white;
    float: none;
    padding: 12px 0;
}

.dropdownbutton{
  border: none;
  outline: none;
  color: white;
  font-size : 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  cursor : pointer;
}

.navitem:hover .dropdownitems{
    display: block;
}

.dropdownitem {
    width : 9em;
    text-align: center;
    padding : 0;
    color : white;
}

默认解决方案说我必须将按钮和图标包装在一个 div 中，并在其中添加 :hover 选择器。如果您查看我的代码，您会发现这正是我在这里所做的：

 /*Button and dropdown items wrapped inside navitem div */ 

 <div className="navitem"> 

         /* Button */

        <button className="dropdownbutton"> 
          {" "}
          {props.icon}
          {props.navtext}
          <IoIosArrowDown className="dropdownicon" />
        </button>

        /* Dropdown Items */

        <div className="dropdownitems"> 
          {props.dropdownItems.map(dropdownItem => (
            <div className="dropdownitem" key={dropdownItem.key}>
              {dropdownItem.text}
            </div>
          ))}
        </div>
      </div>

在我的 css 中我正在这样做：

   .navitem:hover .dropdownitems{
    display: block;
    }

    .dropdownitems {
    display: none;
    position : absolute;
    top : 55px;
    margin-left: -35px;
    background : linear-gradient(to right bottom, rgba(99, 25, 12, 0.8), rgba(226, 13, 13, 0.8));
    color : white;
    float: none;
    padding: 12px 0;
    }

这是一个重现问题的简单 gif：

任何线索/帮助将不胜感激。

【问题讨论】：

标签： html css reactjs

【解决方案1】：

这与反应无关。问题是由于您的顶部菜单和下拉列表之间的差距。正是 dropdownitems css 类的 top : 55px;。这会引入一个间隙，因此当您将鼠标悬停在该空白区域时，下拉菜单会因为您移出菜单元素而消失。

删除top : 55px; 你应该没问题。这是工作example

【讨论】：

就是这样。我把顶部缩小了一点，它起作用了。 :)

【解决方案2】：

如上所述，没有什么大问题，只有下拉列表和链接之间的空间很小。它可以通过为链接或减少下拉菜单顶部的边距提供填充来解决。并给出链接的行高。

【讨论】：