样式化的组件/焦点答案

【问题标题】：Styled Components / focus样式化的组件/焦点
【发布时间】：2020-05-23 22:28:24
【问题描述】：

你好，我想要一个组件（h3 或 div bg img）悬停或聚焦增加 h3 的亮度并将 box-shadow 应用于 bg img

我无法想象如何使用样式化的组件来做到这一点我的代码：

 <Styled.CardTop background={TestBG3}>
    <div className="Bg" />
    <div className="headerH3">
    <h3>aaaaaaaaa.</h3>
    </div>
  </Styled.CardTop>

带有样式的 css：

const CardTop = styled.div`
  position: relative;
  height: 300px;
  width: 100%;
  margin-bottom:40px;
  & .Bg {
    display:flex;
    align-items:center;
    position:relative;
    background-image: url(${({ background }) => background});
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    height: 200px;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    cursor:pointer;
    :hover{
      box-shadow: inset 0 0 100px 100px rgba(0, 0, 0, 0.1);
    }
}
  & .headerH3 {
    padding: 0 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:#1976d2;
  :hover,:active{
    filter: brightness(115%);
  }
  }

【问题讨论】：

标签： css styled-components

【解决方案1】：

你应该使用 &:hover, &:active。我的示例与您的示例略有不同，但您可以看到悬停正在工作

https://codesandbox.io/s/style-with-styled-components-30zww

【讨论】：

您好，我想在 h1 和 img 中的一个悬停或聚焦时将 css 应用于我的 h1 和 img
您可以使用兄弟选择器（如在 css css-tricks.com/child-and-sibling-selectors 中），但它只适用于下一个兄弟 - 就像我在示例中所做的那样。或者您可以使用 React 状态 - 保持 isHover 布尔值，当其中一个元素悬停时更新，然后应用所需的 css。
你能给我举个例子，说明我如何通过 useState 判断我的元素是否处于悬停状态？ -
这里是在 React 状态下悬停的示例：codesandbox.io/s/style-with-styled-components-b4hmu