在任何给定时间突出显示列表中的一项（默认为索引0）

Question

对不起，标题太糟糕了，我一辈子都无法弄清楚如何表达这个问题。默认情况下，当鼠标悬停在列表上时，我希望突出显示列表中的第一项，而其他突出显示。这项工作正常，我很好奇当突出显示另一个项目时如何删除该初始项目的突出显示，我知道我需要处理父组件（列表）中的状态，但无法弄清楚。

这是我的清单项目，其中包含一些基本状态管理，以显示给定的项目是否突出显示。

export default function Item ({ title, onClick, selected, i }) {
  const [highlight, setHighlight] = useState(false)

  return (
    <ListItem
      i={i}
      key={title}
      selected={selected}
      onClick={onClick}
      onMouseEnter={() => setHighlight(true)}
      onMouseLeave={() => setHighlight(false)}
      // i === 0 && no other item is highlighted (need to get this state from the list component)
      highlight={highlight || i === 0}
    >
      {title}
    </ListItem>
  )
}

具有“列表”的父组件，并将该列表中的每个项目映射到上述组件（项目）：

export default function List ({ list, onClick, selected, render }) {s
  return (
    <div>
      {render ? (
        <ListContainer>
          {list.map((item, i) => (
            <Item
              i={i}
              key={item.title}
              title={item.title}
              onClick={() => onClick(item.title)}
              selected={selected(item.title)}
            />
          ))}
        </ListContainer>
      ) : null}
    </div>
  )
}

这里是显示当前实现的Gyazo link，我要实现的是当鼠标输入索引不等于0的另一个项目时，不再突出显示该初始项目。

对不起，标题太糟糕了，我一辈子都无法弄清楚如何表达这个问题。默认情况下，当...

Answer 1

您可以使用CSS执行此操作