如何解决将鼠标悬停在 div/image 上以淡出图像并使文本淡入,但将鼠标悬停在文本上会消除图像的淡出如何预防?
使用 React 和 CSS。
我设置了我的应用程序,可以将鼠标悬停在图像上,图像会淡化为较暗的图像。文本然后淡入它。但是,当我用光标触摸文本时,它会消除淡入淡出。有谁知道我可以如何防止这种情况发生?
我的 JSX 文件:
import React,{ useState } from 'react';
function ProjectSquare(props) {
// const [isHover,setIsHover] = useState(false);
//function hello() {
// console.log("Mouse entered.");
//}
return (
<a href={props.project.linkString} target="_blank" rel="noopener noreferrer" style={{textDecoration: "none"}}>
<div className="project-box">
<span className="project-text">foo</span>
<img src={props.project.imgString} alt={props.project.imgString} />
</div>
</a>
);
}
export default ProjectSquare;
我的 CSS 文件:
.project-box {
height: 500px;
margin-bottom: 80px;
border-radius: 25px;
overflow: hidden;
/*background-position-x: -80px;*/
/*background-color: #a14ff9;*/
}
.project-box img:hover {
-webkit-filter: brightness(20%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.project-text {
-webkit-filter: opacity(0);
color: white;
position: absolute;
z-index: 1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.project-box:hover .project-text {
-webkit-filter: opacity(1);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.project-box img {
object-fit: cover;
z-index: -1;
}
解决方法
解决方案 1:
将锚标记设为块元素,并将悬停添加到 .project-box
而不是 img
。
a.project-box-anchor {
/* anchor tag added inline-block */
display: inline-block;
}
.project-box {
height: 500px;
margin-bottom: 80px;
border-radius: 25px;
overflow: hidden;
/*background-position-x: -80px;*/
/*background-color: #a14ff9;*/
}
/* instead of hovering on image,hover on the whole project box */
.project-box:hover img {
-webkit-filter: brightness(20%);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.project-text {
-webkit-filter: opacity(0);
color: white;
position: absolute;
z-index: 1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.project-box:hover .project-text {
-webkit-filter: opacity(1);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.project-box img {
object-fit: cover;
z-index: -1;
}
<a class="project-box-anchor" href="https://google.com" target="_blank" rel="noopener noreferrer">
<div class="project-box">
<span class="project-text">foo</span>
<img style="height:100px;" src="http://placekitten.com/g/200/200" alt="alt_text" />
</div>
</a>
解决方案 2:更多“hacky”
.project-text {
pointer-events: none;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。