I'm trying to use a custom cursor for my website. However, it only shows up on safari but not chrome. The website is online and the address is www.p3k4800.com
I'd really appreciate the help!
Thank you!!!
Here's the HTML
<!DOCTYPE html>
<html lang="en" dir="ltr" id="bleed">
<head>
<meta charset="utf-8">
<title>Yuhan Hu</title>
<style type="text/css">
body, html {
cursor: url('c2.svg'),auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src=app.js></script>
<link rel="stylesheet" href="style.css">
</head>
<body class="homeindex" >
<div class="mix">
<img src="sources/work1.1.jpg" id="home_video">
<!-- <video controls autoplay id="home_video">
<source src="sources/1.mp4" type="video/mp4">
</video> -->
<div class="texts">
<h1 class = "title"> Yuhan Hu </h1>
<ul class = "items">
<li class="subs"><a href="sub/works1.html">Works.1</li>
<li class="subs"><a href="sub/works2.html">Works.2</li>
<li class="subs"><a href="sub/works3.html">Works.3</li>
<li class="subs"><a href="sub/works4.html">Works.4</li>
<li class="subs"><a href="sub/works5.html">Works.5</li>
<li class="subs"><a href="sub/polaroids.html">Polaroids</li>
<li class="subs"><a href="sub/videos.html">Videos</li>
<br>
<br>
<li class="subs"><a href="sub/info.html">Contact</li>
</ul>
</div>
</div>
</body>
</html>
and here's the css cursor part
.title{
color: white;
mix-blend-mode: difference;
font-family: "MyWebFont" ;
font-weight: bolder;
position: relative;
left: 20px;
animation: neon .08s ease-in-out infinite alternate;
cursor: url('sources/c.svg')
}
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
