我如何使用主动伪 class 来显示一些东西

Question

我试图在单击图像后显示“已复制”文本，其中：活动 class 但使用 hover 进行测试，我无法弄清楚。 像一个：hover 在导航栏上看到一个下拉菜单

 .copy { display: flex; &__text { display: none; } &__img { max-width: 1.2rem; height: 1.2rem; margin-left: 0.3rem; cursor: pointer; &:active { filter: opacity(0.5) drop-shadow(0 0 0 rgb(133, 177, 0)); } } }.copy__img:active.copy__text { display: block; background-color: red; }

 <div className="copy"> <img className="copy__img" src={CopyIcon} onClick={copyText} alt="copy icon" /> <p className={"copy__text"}>copied</p> </div>

Answer 1

:active 伪类用于 select 并设置活动链接或任何其他元素的样式。 它由用户激活。

当用户clicks链接或元素并按下鼠标按钮时，元素变为活动状态。

有关文档的更多详细信息

:active 伪类使用用户单击而不是悬停元素。

如果您正在使用 React.js，您可以使用以下方法：-

jsx：

    import "./App.scss";
    import { useState } from "react";

    export default function App() {
       const [mouse, setMouse] = useState(false);

       return (
         <div className="App">
          {/* :active && mouseEventListner*/}
          <h4>:active && mouseEventListner</h4>
          <div className="div">
             <img
                className="div__img"
                src="https://picsum.photos/200/200"
                alt="random"
                onMouseDown={() => setMouse(true)}
                onMouseUp={() => setMouse(false)}
             />
             {mouse && <p className="div__text">copied</p>}
          </div>

          {/* :active && :hover */}
          <h4>:active && :hover</h4>
          <div className="parentDiv">
             <img
                className="parentDiv__childDiv1"
                src="https://picsum.photos/200/200"
                alt="random"
             />
             <div className="parentDiv__childDiv2">copied</div>
          </div>
        </div>
      );
    }

scss：

    .div{
        display: flex;
        &__img{
           width: 5rem;
           cursor: pointer;
           &:active{
              filter: opacity(0.5) drop-shadow(0 0 0 rgb(133, 177, 0));
          }
       }
       &__text{
          background-color: red;
       }
    }


    .parentDiv{
        width: 6rem;
        background-color: teal;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        padding: 1rem;
        &:hover > &__childDiv2 {
           display: block;
        }
        &__childDiv1, &__childDiv2{
           width: 6rem;
           height: 6rem;
        }
        &__childDiv1{
           background-color: white;
           &:active{
              filter: opacity(0.5) drop-shadow(0 0 0 rgb(133, 177, 0));
           }
        }
        &__childDiv2{   
           display: none;
           background-color: red;
        }
    }

:active 伪 class 仅在单击时有效。