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

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

您的动画应该与悬停在父级 .previewProject 上有关，所以像这样:

.previewProject:hover .Project-image {
    /* Do whatever */
}