我面臨這個(gè)問題。我想在選擇的這個(gè)框中顯示懸?？颉e 當(dāng)我將鼠標(biāo)懸停在框一上時(shí)，我想顯示懸停一、框二 -> 懸停二。但在我的示例中，當(dāng)我將鼠標(biāo)懸停在“一”上時(shí)，兩者都會(huì)顯示。我試圖用 refs 或 e.target 來做到這一點(diǎn)，但總是有些事情不是我想要的。鏈接到 stackblitz：https://stackblitz.com/edit/react-hc4741 ?file=src/App.jsimport React, { useState } from "react";import "./style.css";import { BooksSection, BookCard, BookCardHover } from "./Styled";export default function App() {  const [displayBookCardHover, setDisplayBookCardHover] = useState(false);  const showCardHover = () => {    setDisplayBookCardHover(true);  };  const hiddenCardHover = () => {    setDisplayBookCardHover(false);  };  return (    <div>      <BooksSection>        <BookCard          bgColor={"#000"}          color={"#fff"}          onMouseEnter={showCardHover}          onMouseLeave={hiddenCardHover}        >          <BookCardHover display={displayBookCardHover}>            Hover One          </BookCardHover>          Box One        </BookCard>        <BookCard          bgColor={"#fff"}          color={"#000"}          onMouseEnter={showCardHover}          onMouseLeave={hiddenCardHover}        >          <BookCardHover display={displayBookCardHover}>            Hover Two          </BookCardHover>          Box Two        </BookCard>      </BooksSection>    </div>  );}樣式組件import styled from "styled-components";export const BooksSection = styled.div`  display: flex;  flex-direction: row;  flex-wrap: wrap;  width: 100wh;`;export const BookCard = styled.div`  width: 50%;  height: 500px;  padding: 20px 0;  background: ${props => props.bgColor};  color: ${props => props.color};  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  position: relative;`;export const BookCardHover = styled.div`  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  font-size: 50px;  background: rgba(0, 0, 0, 0.7);  visibility: ${({ display }) => (display ? "100" : "hidden")};`;