Question

你好，我想当一个组件（h3或div bg img）悬停还是专注增加h3的亮度并将框阴影应用于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%);
  }
  }

Answer 1

您应该使用＆：hover和＆：active。我的示例与您的示例稍有不同，但是您可以看到悬停功能正常

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

样式化的组件/焦点

1 个答案: