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 */
}

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

1 个答案: