我正在制作一个投资组合网站,但遇到某些问题。 当我将鼠标悬停在项目的图像上时,图像会变大,不透明度降低,并显示项目说明。 但是,我希望能够添加带有说明的链接。 问题是,当我将鼠标悬停在链接上时,图像返回到其默认状态,这意味着图像缩小,不透明,并且说明与链接一起消失了。

我试图重组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;
}

#1楼 票数:0 已采纳

您的动画应该与悬停在父.previewProject上有关,因此如下所示:

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

  ask by Meraki-Dot translate from so

未解决问题?本站智能推荐:

1回复

如何使元素的样式依赖于另一个元素的样式

如果某个其他元素可见,则我需要为一个元素设置一些特殊样式(由特殊的CSS类指示,并且可以动态更改)。 我需要这样做是因为页面渲染及其行为完全由某些框架的代码控制,并且我不想更改它。 我可以将任何内容放在页面正文中的任何位置。 有没有一种非黑客的方式来做到这一点? 我唯一的想法是对jQ
2回复

如何使1 css值依赖于另一个?

我试图用三个部分制作标题。 (所有部分都是水平排列的)我希望中间部分根据其中的内容(文本)的大小进行调整。 当我调整这个中等大小时,我希望其他两个相应地进行调整,这样三个部分总是占据整个网站的宽度并保持均匀。 我的网站宽度是1000px,这就是我设置它的方式 我想创建一个脚本,其中
2回复

HTML:有没有办法确定元素是否在另一个元素后面?

我们有一个带有搜索弹出窗口的应用程序。 您搜索一个术语,它会在页面中找到它们,并在该单词中添加一个类,然后该单词突出显示该文本。 有时,找到的实例位于搜索弹出窗口后面的页面区域中。 如果是这种情况,我想调整搜索弹出窗口的不透明度,以便用户可以看到它背后的实例。 有没有简单的方法来做到这一
1回复

如何设置div位置依赖于另一个div位置?

这是代码的html部分: 下面的函数采用最后一个块,将其删除并创建另一个块以将其置于顶部。 使用下面的代码,我试图将蛇位置eqal设置为头部的位置,因此每当一个新的块成为头部时,蛇就会移动一个块。 当我调用函数turnRight(); 头部和身体移动,但蛇留在原地。
2回复

有没有办法用 CSS 切换另一个元素的复选框输入?

我为我的网站的移动版本制作了一个纯 CSS 汉堡菜单,这本来是完美的,但是,它是一个单页网站,菜单上的所有链接都是页面上其他部分的 ID。 由于页面不会刷新或打开另一个页面,因此菜单不会关闭。 有谁知道用 CSS 甚至 Javascript 关闭菜单的方法吗? 我已经耗尽了我所有的资源。 CS
1回复

有没有办法添加一个在任何元素添加到 DOM 之前运行但依赖于 body 元素的脚本?

我正在尝试使用MutationObserver检查页面上的每个突变。 有没有一种简单的方法可以解决以下问题,因此我不必将它作为内联脚本包含在正文中(即包含在<head> )? 问题在于我需要bodyList变量才能开始监视添加到页面的项目。 显然我不能使用 onLoad 事件或任何
1回复

有没有办法显示溢出其父元素的 ul 元素的最后一个 li 元素?

背景 我正在开发一个聊天应用程序,我有一个使用 li 元素显示消息的 ul 元素。 在某些时候,ul 元素会溢出其父元素。 问题 现在,问题是当我切换聊天时。 有没有办法可以让 ul 元素显示溢出的 li 元素,即显示 ul 元素的最后一个 li 元素,而不是从第一个 li 元素开始显示,并让用户
1回复

有没有办法创建一个元素,当不同的元素悬停在并跟随光标时出现?

目标 正如标题所说,我试图有两个元素,元素 A 和元素 B。我想让元素 B 只在元素 A 悬停时显示,但我也希望元素 B 跟随光标而不会抖动。 我可以让悬停/显示部分独立工作,我可以让以下光标部分独立工作,但我似乎无法在不使用 offsetX/offsetY 的情况下将它们放在一起,这会导致它抖动