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

Question

我正在制作一个投资组合网站，但遇到了一些问题。 当我在项目的图像上 hover 时，图像会变大，不透明度降低，并且会出现项目描述。 但是，我希望能够添加带有描述的链接。 问题是当我在链接上 hover 时，图像返回到它的默认 state，这意味着图像缩小，不透明，并且描述随着链接消失。

我尝试过重组 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

您的 animation 应该与悬停在父.previewProject上有关，所以是这样的：

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