фоновый эффект при нажатии / h3 с тегом a

Question

Здравствуйте. Хотелось бы узнать, возможно ли удалить этот фон, нажав на мобильные устройства в моем теге h3 с кодом

:

<Styled.CardTop background={TestBG2}>
      <div className="Bg" />
        <div className="headerH3">
        <h3 onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
         <a href='xd'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.</a>
        </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; 
    word-break: break-all;
  }
  & > div > h3 {
    text-align: left;
    font-size: 1rem !important;
    font-family: Roboto Slab, serif;
    font-weight: 700;
    margin: 10px 0px 10px 0 !important;
  }
  & > div > h3 > a {
    text-decoration: none;
    color:#1976D5;
    display: block;
    clear: both;
    :hover,:active{
      filter: brightness(115%);
    }
  }
`;

Я не знаю, возможно ли удалить этот фон, он появляется только тогда, когда он активен при нажатии

проблема:

Answer 1

Устройства с сенсорным экраном, в частности, не имеют событий мыши. Специально для них есть сенсорные события. Но это обычная вещь - хотеть, чтобы события касания использовали события мыши. Я считаю, что mouseenter и mouseleave не работают так же хорошо, как mouseover и mouseout. Я думаю, что это решит вашу проблему в этом случае.

<h3 onMouseOver={() => setHover(true)} onMouseOut={() => setHover(false)}>

Список событий DOM: https://www.w3schools.com/jsref/dom_obj_event.asp