Question

好的，我是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，再现了该问题：

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

Answer 1

这与反应无关。该问题是由于您的顶部菜单和下拉列表之间存在间隙。与top : 55px; CSS类的dropdownitems完全相同。这会引入间隙，因此当您将鼠标悬停在该空白区域上时，由于移出菜单元素，下拉菜单会消失。

删除top : 55px;，就可以了。继承人的example

Answer 2

如上回答，在下拉列表和链接之间只有很小的空间没有什么大问题。它可以通过填充链接或减少下拉菜单的页边距来解决。并给出链接的线高。

悬停时topnavbar下拉菜单消失得太快React

2 个答案: