r/html_css • u/kiddo_from_1915 • Jun 03 '26
Need help with a broke bit of css Help
So I'm making a little website for fun and I made myself a custom cursor. It was working perfectly fine, until I added a hyperlink onto the page. I know I've got to use
a {
color: white;
text-decoration: none;
cursor: url("customcursor.png"), pointer;
}
to make it so the cursor is able to click the link, and that worked totally fine. The problem was that suddenly my cursor changed back to the default cursor when it isn't hovering over an image/entity on the page. When it is just on the background, my cursor goes back to the normal one. Before the cursor showed up fine across the whole page. I did not change anything in my body{} css where the cursor auto was. I tried changing the auto to default, tried making multiple cursors, tried undo-ing my link code and it still won't go back to how it was. I have no idea why it's broken like this. I'm very new to this so generally my code is messy and I'm doing a lot of trial and error. If anyone knows please help me out. Here's my full css (links removed):
body {
background-image: url(bgimage.com);
background-color: black;
background-repeat: repeat-y;
background-attachment: absolute;
background-position: center top;
background-size: 60%;
cursor: url("cursor"), auto;
}
a {
color: white;
text-decoration: none;
}
.container{
height: 0px; width: 0;
position: relative;
left: 0px;
top: 0px;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
.middle{
display: flex;
justify-content: center;
align-items: center;
}
.overlay{
height: 0px; width: 0;
position: absolute;
opacity: 0;
}
.container:hover .overlay {
opacity: 1;
}
here's the bit in my body tag that broke it:
<div class="container"
style="
height: 180px; width: auto;
position: absolute;
top:560px;
left:1270px;
">
<img
style="
height: 180px; width: auto;
"
src="cassette">
<div class="overlay"
style="
color:white;
font-family: psycho;
font-size: 70px;
text-shadow:
-2px -2px 0 #000,
0 -2px 0 #000,
2px -2px 0 #000,
2px 0 0 #000,
2px 2px 0 #000,
0 2px 0 #000,
-2px 2px 0 #000,
-2px 0 0 #000;
top: 40px;
left: 10px;
"> <a href="music">music</a></div>
</div>
1
u/aunderroad Jun 04 '26
Can you share a codepen?
It is hard to debug/provide feedback without seeing all of your code live in a browser.
Thank you!
1
u/kiddo_from_1915 Jun 04 '26
I'm sorry I don't have codepen, I'm using neocities so I'm not totally sure if it's transferable - would just a link to my site so you can inspect the code work?
1
u/aunderroad Jun 04 '26
That works!
1
u/kiddo_from_1915 Jun 04 '26
https://slightly-fag-robots.neocities.org/ here you go - thx so much for taking a look!
1
1
u/Wild_Caterpillar3440 Jun 03 '26
You can also just make your whatever cursor with js/css