css - 仅当子项未聚焦时才在悬停时更改父项的样式 - 样式化组件

Question

我有一个 div 组件:

const Parent = styled.div`
   &:not(${Input}:focus):hover {
     border-color: blue;
   }
`;

和输入的 child

const Input = styled.input``;

如您所见，如果 Input 获得焦点，我不想更改 Parent 上的 border-color。但是atm :hover 根本不起作用。寻求帮助，谢谢!

Answer 1

您可以利用 :focus-within 来做到这一点。

div {
  padding: 1em;
  margin: 2em;
  display: inline-block;
  border-width: 3px;
  border-style: solid;
}

div:hover {
  border-color: red;
}

div,
div:focus-within,
div:focus-within:hover {
  border: 3px solid blue;
}

<div>
  <input type="text">
</div>