css - 带有标签 a 的 click / h3 上的背景效果

问题描述

您好，我想知道是否可以通过单击我的 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%);
    }
  }
`;

不知道能不能去掉这个背景，只有在手机点击的时候才会出现

问题：

标签： css

具体来说，触摸屏设备没有鼠标事件。实际上有专门针对他们的触摸事件。但是希望触摸事件利用鼠标事件是很常见的事情。我发现 mouseenter 和 mouseleave 的效果不如mouseoverand mouseout。我认为这些将在这种情况下解决您的问题。

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

DOM 事件列表：https ://www.w3schools.com/jsref/dom_obj_event.asp

css - 带有标签 a 的 click / h3 上的背景效果

问题描述

解决方案

推荐阅读