I’m having trouble creating a custom cursor with blend mode exclusion. I've tried a few methods, but for some reason, when I added a cursor with blend modes, it only appears in the top left corner of my page and doesn't move. I want it to be the main cursor, but I’m not sure how to resolve this issue.
For reference, you can find the Codepen link here: 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>