仅在选项卡上而不是在鼠标单击时显示焦点轮廓

Question

我正在开发 ReactJS 网络应用程序，我正在添加特定的大纲样式，但是当用户使用鼠标单击它时，大纲会显示出来。我怎样才能让大纲只出现在制表符上？

const Test = styled.div`
 &:focus {
  outline: 1px solid red;
 }
`;

Answer 1

这个问题已经有了很好的答案： Enable :focus only on keyboard use (or tab press)

看一下，答案很详细。玩得开心编码。