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

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 {&nbsp; &nbsp; /* Do whatever */}