Стилизованные компоненты / фокус

Question

Здравствуйте, я хотел, чтобы когда компонент (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%);
  }
  }

Answer 1

Вы должны использовать &: hover, &: active. Мой пример немного отличается от вашего, но вы можете видеть, что hover работает

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