悬停在保持DIV元素位置为Sticky后不起作用

Question

我有5个div元素，在这5个元素中，我分配了position:sticky和top:0到最后，但在一个元素中是Footer。赋值position:sticky后，悬停对子元素不起作用。

.works {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-left: 10rem;
padding-right: 10rem;
margin-bottom: 10rem;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
width: 100vw;
height: 100vh;
position: sticky;
top: 0;
}

.s-i:hover {
cursor: none;
color: var(--primary-yellow);
}

<div className="works">
<div className="project p-1">
<Link style={{cursor:"none"}} to="/project1">
<img className="project-image first-p" src={covac} alt="" />
</Link>
</div>

<div className="project p-2">
<Link style={{cursor:"none"}} to="/project2">
<img className="project-image second-p" src={rogalik} alt="" />
</Link>
</div>

<div className="project p-3">
<Link style={{cursor:"none"}} to="/project3">
<img className="project-image third-p" src={mia} alt="" />
</Link>
</div>

</div>


<div className="footer">
<div className="social">
<a href="https://twitter.com/nsarathsunny" className="s-i twitter"> <p className="t-text">Twitter</p> <span className="bordert"></span></a>
<a href="https://twitter.com/nsarathsunny" className="s-i behance"> <p>Behance</p> <span className="borderb"></span></a>
<a href="https://twitter.com/nsarathsunny" className="s-i linkedin"> <p>LinkedIn</p> <span className="borderl"></span></a>
<a href="https://twitter.com/nsarathsunny" className="s-i insta"> <p>Instagram</p> <span className="borderi"></span></a>
<a href="https://twitter.com/nsarathsunny" className="s-i mail"> <p> Mail</p> <span className="borderm"></span></a>
</div>         
</div>

<div className="contact-pager">
<Contact/>
</div>

我试过使用

@media(hover:hover){ 
.s-i:hover {
cursor: none;
color: var(--primary-yellow);
}}

我也尝试过GSAP，但也没有运气。

Answer 1

因为您将.footer z-index设置为-1而.works覆盖了它，所以我将z-index设置为1，现在它工作正常

.works {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-left: 10rem;
padding-right: 10rem;
margin-bottom: 10rem;
}
.footer {
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
width: 100vw;
height: 100vh;
position: sticky;
top: 0;
}

.s-i:hover {
cursor: none;
color: yellow;
}

<div class="works">
<div class="project p-1">
<Link style={{cursor:"none"}} to="/project1">
<img class="project-image first-p" src={covac} alt="" />
</Link>
</div>

<div class="project p-2">
<Link style={{cursor:"none"}} to="/project2">
<img class="project-image second-p" src={rogalik} alt="" />
</Link>
</div>

<div class="project p-3">
<Link style={{cursor:"none"}} to="/project3">
<img class="project-image third-p" src={mia} alt="" />
</Link>
</div>

</div>


<div class="footer">
<div class="social">
<a href="https://twitter.com/nsarathsunny" class="s-i twitter"> <p class="t-text">Twitter</p> <span class="bordert"></span></a>
<a href="https://twitter.com/nsarathsunny" class="s-i behance"> <p>Behance</p> <span class="borderb"></span></a>
<a href="https://twitter.com/nsarathsunny" class="s-i linkedin"> <p>LinkedIn</p> <span class="borderl"></span></a>
<a href="https://twitter.com/nsarathsunny" class="s-i insta"> <p>Instagram</p> <span class="borderi"></span></a>
<a href="https://twitter.com/nsarathsunny" class="s-i mail"> <p> Mail</p> <span class="borderm"></span></a>
</div>         
</div>

<div className="contact-pager">
<Contact/>
</div>