![](/img/trans.png)
[英]How to make NavBar hover dropdown effect work in html and css
[英]How to make hover effect work for an icon in a css grid?
我是編碼新手,正在嘗試制作一個組件來預覽/顯示我一直在從事的項目。 我正在嘗試使我的鏈接(例如GitHubIcon和LaunchIcon)具有:hover效果,但是當我嘗試類似.linkItems:hover{background-color: red}甚至嘗試完全不同的東西(如.title)時它不起作用:懸停{背景顏色:紅色} 。 當我使用 chrome 開發工具時,hover 也不起作用,除非我強制它,當我不強制它時,它會自動變灰。 當它不在 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 網格中時,它可以工作。
零件
<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
.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;
}
}
如果我浪費了任何人的時間,我很抱歉。 我想通了,我的部分的 z-index 是-2,所以這就是 hover 沒有顯示的原因。 我花了一整天的時間來解決這個問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.