CSS-防止子元素继承取消父元素的转换属性

我发现了与此类似的问题，但没有一个涉及到这个特定场景。在我的react应用程序中，在带有图像、文本和按钮的卡上，我希望文本和按钮有条件地出现在悬停状态，图像比例增加，图像亮度降低。问题是，当我将鼠标悬停在按钮上时，图像上的变换和过滤器属性被取消。有人有解决办法吗

下面是Card.js中的代码

const Card = (props) => {
    const [hover, setHover] = useState(false);
    const handleClick = () => {
        console.log("downloading sucka");
    };

    return (
        <div
            className="card"
            onMouseEnter={() => setHover(true)}
            onMouseLeave={() => setHover(false)}
        >
            <img alt="" src={props.url}></img>
            {hover && (
                <>
                    <div className="cardText">
                        <h4 className="username">{props.username}</h4>
                        <h4 className="title" style={{ fontWeight: "500" }}>
                            {props.title}
                        </h4>
                    </div>
                    <button className="downloadButton" onClick={handleClick}>
                        <a download href={props.downloader + "?force=true"}>
                            Download
                        </a>
                    </button>
                </>
            )}
        </div>
    );
};

---

提前表示衷心的感谢

您可以将：悬停添加到卡中吗

.card:hover > img {
  transform: scale(1.03);
  filter: brightness(80%);
}

---

非常好，谢谢你，ksav！：）我马上就接受这个答案

.card:hover > img {
  transform: scale(1.03);
  filter: brightness(80%);
}