有没有办法让一个元素依赖另一个元素？

Question

我正在制作一个投资组合网站并且遇到了一些问题。当我将鼠标悬停在项目图像上时，图像会变大，不透明度降低，并且会出现项目描述。但是，我希望能够添加带有描述的链接。问题是当我将鼠标悬停在链接上时，图像会返回到它的默认状态，这意味着图像会缩小、不透明并且描述会随着链接而消失。我曾尝试重构周围的 javascript 和 css，但没有得到任何解决方案。JavaScript：const projectNode = (project) => {    return (        <div className="Project">            <div>                <div className="previewProject">                    <img className="Project-image" src={project.image} alt="project-images" />                    <div className="Project-info" >{project.description}<br></br>                        <a className="project-link" href={project.github}>GITHUB</a>                    </div>                </div>            </div>        </div>    )}//CSS//.previewProject { display: flex; justify-content: center; align-items: center; position: relative;}.Project-image { opacity: 1.0; filter: alpha(opacity=40); transition: transform .3s; border: solid 3.5px #606060; /* Animation */ margin: 50px auto; position: relative; top: 0; left: 0;}.Project-image+.Project-info { opacity: 0; transition: opacity 0.3s;}.Project-image:hover { opacity: 0.2; filter: alpha(opacity=100); transform: scale(1.25);}.Project-image:hover+.Project-info { opacity: 1; color: black; }.Project-info { font-family: 'Lato', sans-serif; font-size: 21px; width: 25%; position: absolute; pointer-events: none;}.project-link { pointer-events: auto;}

Answer 1

你的动画应该与悬停在 parent 上有关.previewProject，所以是这样的：

.previewProject:hover .Project-image {

    /* Do whatever */

}