所以我遇到了一个问题,我还是个新手,我的网站上有一个自定义光标,但是由于某种原因,当我将鼠标悬停在我的“项目”div 类第二列上时,链接不起作用.他们使用我的姓名、信息和联系信息,而不是项目,不知道为什么。如果有人可以帮助这将是惊人的。我曾尝试将 z-index 放在该列上或放在光标上,但随后一个只是隐藏了另一个。
$(document).ready(function() {
var cursor = $(".cursor");
$(window).mousemove(function(e) {
cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});
$(window)
.mouseleave(function() {
cursor.css({
opacity: "0"
});
})
.mouseenter(function() {
cursor.css({
opacity: "1"
});
});
});
html {
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
font-weight: normal;
webkit-overflow-scrolling: touch;
padding: 0;
margin: 0;
}
body {
scroll-snap-type: mandatory;
scroll-snap-points-y: repeat(100vh);
scroll-snap-type: y mandatory;
font-weight: normal;
webkit-overflow-scrolling: touch;
padding: 0;
margin: 0;
font-family: Sans;
background-color: black;
max-width: 10000px;
}
nav {
display: flex;
mix-blend-mode: exclusion;
font-family: Sans;
padding: 5px;
}
.name {
flex: 1;
width: 15%;
position: fixed;
padding-left: 10px;
color: white;
mix-blend-mode: exclusion;
padding-top: 10px;
z-index: 999;
}
.info {
flex: 1;
width: 15%;
position: fixed;
padding-left: 33.1%;
color: white;
mix-blend-mode: exclusion;
padding-top: 10px;
text-align: left;
z-index: 99;
}
a {
text-decoration: none;
color: white;
font-size: 25px;
}
h1 {
align-content: center;
height: auto;
z-index: 10;
font-size: 124px;
text-align: center;
color: white;
}
.clickNav {
display: flex;
flex-wrap: wrap;
font-size: 24px;
position: fixed;
bottom: 0;
padding-bottom: 10px;
letter-spacing: .35px;
width: 100%;
font-family: Sans;
mix-blend-mode: exclusion;
}
.contact {
position: fixed;
bottom: 9px;
padding-left: 10px;
mix-blend-mode: exclusion;
z-index: 99;
}
.contact2 {
position: fixed;
bottom: 9px;
padding-left: 80px;
mix-blend-mode: exclusion;
z-index: 98;
}
.cursor {
position: fixed;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffff;
mix-blend-mode: difference;
z-index: 1;
}
html,
* {
cursor: none;
z-index: -1;
}
.column {
width: 66%;
flex: 2;
padding-left: 33%;
padding-top: 6%;
font-size: 25px;
line-height: 45px;
font-family: Sans;
letter-spacing: 1px;
padding-bottom: 1px;
margin-bottom: 1px;
}
.column-two {
width: 66%;
flex: 1;
padding-left: 33%;
padding-top: 3%;
letter-spacing: 1px;
padding-bottom: 1px;
margin-bottom: 1px;
max-width: 1500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor"></div>
<div class="nav">
<div class="name"><a href="work.html">Ryan Stewart</a></div>
<div class="info"><a href="information.html">Information</a></div>
</div>
<div class="contact"> <a href="https://www.instagram.com/ryanforprez/">Instagram</a><br>. <a href="https://www.are.na/ryan-stewart">Are.na</a>
</div>
<br><br>
<div class="column-layout">
<div class="column-two">
<a href="beansans.html"><img src="Images/Asset%2029.jpg" alt="Bean Sans" style="max-
width:100%;height:auto;"></a>
<a href="alyx.html"><img src="Images/alyx1.jpg" alt="ALYX" style="max-
width:100%;height:auto;"></a>
<div>
<a href="cassette.html"><img src="Images/cass-02%20copy.png" alt="Cassettes" style="max-width:100%;height:auto;"></a>
</div>
<div>
<a href="lookat.html"><img src="Images/lookat-this2.gif" alt="Look at This
Photograph" style="max-width:100%;height:auto;"></a>
</div>
<a href="popper.html"><img src="Images/pillpopcovermock%202.jpg" alt="Pill Popper" style="max-width:100%;height:auto;"></a>
<a href="canyon.html"><img src="Images/arenamock-Recoverevd.jpg" alt="Canyon Daze" style="max-width:100%;height:auto;"></a>
<a href="mutiny.html"><img src="Images/ring-01.png" alt="Mutiny" style="max-width:100%;height:auto;"></a>
<a href="tendencies.html"><img src="Images/22.jpg" alt="Tendencies" style="max-width:100%;height:auto;"></a>
</div>
</div>