我遇到了一个问题，使自定义光标与混合模式排除。我尝试了一些技术，但出于一些奇怪的原因，我添加了一个混合模式的光标，但它只是显示在我的页面的左上角，不移动。我希望它是主光标，但不知道如何修复它。
Codepen: https://codepen.io/ryanforprez/pen/vYyEWyL
.cursor {
position: fixed;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffff;
mix-blend-mode: difference;
z-index: 999;
transition: transform 0.2s;
}
html,
* {
cursor: none;
pointer-events: none;
}
<html>
<body onclick='window.location.href="work.html"'>
</body>
</html>
<body>
<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="work.html">Click anywhere to enter.</a>
</div>
<marquee width="100%" direction="left" scrollamount="15" behavior="scroll">Ryan Stewart: Graphic Design, Art Direction, Letterform Design</marquee>
<script>$(document).ready(function() {
$(".hamburger-menu-button").click(function() {
$(".main-box").toggleClass("main-box-clicked");
$(".hamburger-box").toggleClass("hamburger-box-clicked");
});
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"
});
});
$(".link")
.mouseenter(function() {
cursor.css({
transform: "scale(3.2)"
});
})
.mouseleave(function() {
cursor.css({
transform: "scale(1)"
});
});
$(window)
.mousedown(function() {
cursor.css({
transform: "scale(.2)"
});
})
.mouseup(function() {
cursor.css({
transform: "scale(1)"
});
});
});</script>
我认为这是因为你有多个开始和结束的主体和html标签，短，因为你的代码是混乱的。以下是缩进正确、紧凑和工作的版本:
$(document).ready(function() {
$(".hamburger-menu-button").click(function() {
$(".main-box").toggleClass("main-box-clicked");
$(".hamburger-box").toggleClass("hamburger-box-clicked");
});
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"
});
});
$(".link")
.mouseenter(function() {
cursor.css({
transform: "scale(3.2)"
});
})
.mouseleave(function() {
cursor.css({
transform: "scale(1)"
});
});
$(window)
.mousedown(function() {
cursor.css({
transform: "scale(.2)"
});
})
.mouseup(function() {
cursor.css({
transform: "scale(1)"
});
});
});.cursor {
position: fixed;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #cccc;
mix-blend-mode: difference;
z-index: 999;
transition: transform 0.2s;
}
* {
cursor: none;
pointer-events: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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="work.html">Click anywhere to enter.</a>
</div>
<marquee width="100%" direction="left" scrollamount="15" behavior="scroll">Ryan Stewart: Graphic Design, Art Direction, Letterform Design</marquee>
<div class="cursor"></div>