使用 css :hover 和 map() 方法仅适用于第一个元素

问题描述

我正在 React 中创建一个应用程序，我正在使用数组和 map() 方法构建菜单。

我的导航按钮显示更正，当鼠标悬停在按钮上时，颜色会发生变化，但是，过渡仅适用于第一个按钮，当您将鼠标悬停在其他按钮上时，颜色会发生变化。

这是我的代码：

const buttons = ["Button 1","Button 2","Button 3","Button 4","Button 5"];

{buttons.map((name) => (
              <NavButton
                key={name}
                onMouseEnter={() => setHovered(name)}
                onMouseLeave={() => setHovered(!name)}
                onClick={() => handletoggle(name)}
                className={classNames("george",{
                  // active: navButtonClicked === name && activeButton === true,//If you just want to make the clicked button have the class active
                  // active: activeButton === true,//If you want to make all buttons active
                  // hovered: hovered === name,})}
              >
                {name}
              </NavButton>
            ))}

CSS

const NavButton = styled.div`
  //Border
  border-radius: 100%;
  //Colour
  color: white;
  background: #3498db;
  //Positioning
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 1;
  //Sizing
  width: 60px;
  height: 60px;
  //Text
  text-align: center;
  line-height: 60px;
  //Transitions
  transition: transform ease-out 200ms;
  &:hover {
    background-color: blue;
    transition-duration: 50ms;
    transform: scale(1.2,1.2) translate3d(0,0);
  }
  &:nth-child(1) {
    //Positioning
    z-index: 2;
  }
  &.active :nth-child(2) {
    //Positioning
    transition-duration: 50ms;
    transform: translate3d(0,85px,0);
  }
  &.active :nth-child(3) {
    transition-duration: 100ms;
    transform: translate3d(0,170px,0);
  }
  &.active :nth-child(4) {
    transition-duration: 150ms;
    transform: translate3d(0,255px,0);
  }
  &.active :nth-child(5) {
    transition-duration: 200ms;
    transform: translate3d(0,340px,0);
  }
`;

我是不是没有正确理解某些东西？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）