[英]How to make hover effect work for an icon in a css grid?
I'm new to coding and was trying to make a component to preview/display a project I've been working on.我是编码新手,正在尝试制作一个组件来预览/显示我一直在从事的项目。 I'm trying to make my links like the GitHubIcon and LaunchIcon have a :hover effect but it's not working when I try something like .linkItems:hover{background-color: red} or even when I try something completely different like .title:hover{background-color: red} .
我正在尝试使我的链接(例如GitHubIcon和LaunchIcon)具有:hover效果,但是当我尝试类似.linkItems:hover{background-color: red}甚至尝试完全不同的东西(如.title)时它不起作用:悬停{背景颜色:红色} 。 When I use the chrome dev tool, the hover doesn't work either unless I force it and when I don't force it, it just automatically grays out.
当我使用 chrome 开发工具时,hover 也不起作用,除非我强制它,当我不强制它时,它会自动变灰。 It works when it's not in a css grid.
当它不在 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 网格中时,它可以工作。
Component零件
<li className={`${styles.gridContainer} ${props.className}`}>
<div className={styles.imageWrapper}>
<Image className={styles.image} src={props.imgSrc} alt="alt-picture" />
</div>
<div className={styles.projectContent}>
<div className={styles.title}>
<h2>{props.heading}</h2>
<h1>{props.titleProject}</h1>
</div>
<div className={styles.projectDescription}>
<SecondaryCard className={styles.descriptionCard}>
{props.description}
</SecondaryCard>
</div>
<ul className={styles.techStack}>
{props.techStack.map((el) => {
return (
<li className={styles.techs} key={uuidv4()}>
{el}
</li>
);
})}
</ul>
<div className={styles.links}>
<Link href={props.githubUrl}>
<GitHubIcon className={styles.linkItems} />
</Link>
<Link href={props.deployUrl}>
<LaunchIcon className={styles.linkItems} />
</Link>
</div>
</div>
</li>
CSS CSS
.gridContainer {
display: grid;
grid-template-columns: repeat(16, 1fr);
list-style: none;
}
.gridContainer > div {
position: relative;
}
.imageWrapper {
grid-area: 1/3/-1/13;
align-self: center;
z-index: -1;
}
.projectContent {
grid-area: 1/6/-1/15;
align-self: center;
text-align: right;
}
.title {
color: var(--second-bg-heading);
}
.projectDescription {
margin-top: 1rem;
}
.techStack {
margin-top: 2rem;
display: flex;
justify-content: flex-end;
color: var(--second-sub-headline);
}
.links {
margin-top: 2rem;
}
.linkItems {
margin-left: 5rem;
transform: scale(2);
color: var(--second-sub-headline);
margin-right: 1rem;
}
.techs {
list-style: none;
margin-left: 1rem;
}
@media (max-width: 1200px) {
.imageWrapper {
opacity: 0.9;
grid-column: 1/14;
}
.projectContent {
transform: scale(0.9);
grid-column: 7/17;
}
}
@media (max-width: 768px) {
.imageWrapper {
opacity: 0.25;
grid-column: 1/-1;
}
.image {
border-radius: 10px;
}
.projectContent {
grid-column: 1/-1;
font-size: 1.5rem;
text-align: left;
align-self: center;
}
.title {
padding: 0 3%;
margin-bottom: 5%;
}
.projectDescription {
margin: 3% 0;
border-radius: 0;
background-color: transparent;
padding: 0 3%;
}
.techStack {
justify-content: flex-start;
padding: 0 3%;
margin: 3% 0;
}
.techs {
margin-right: 5%;
margin-left: 0;
margin-top: 0;
}
.links {
padding: 0 10%;
margin: 6% 0 6% 0;
display: flex;
justify-content: space-around;
}
.linkItems {
margin-right: 0;
margin-left: 0;
transform: scale(2);
}
}
@media (max-width: 600px) {
.projectContent {
transform: scale(0.8);
}
}
@media (max-width: 480px) {
.projectContent {
font-size: 1rem;
}
}
I'm sorry if I wasted anyone's time.如果我浪费了任何人的时间,我很抱歉。 I figured it out and the z-index of my section was -2 so that's why the hover wasn't showing.
我想通了,我的部分的 z-index 是-2,所以这就是 hover 没有显示的原因。 I spent the whole day figuring this out.
我花了一整天的时间来解决这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.