Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
218 views
in Technique[技术] by (71.8m points)

html - Custom Cursor CSS not working on certain parts of the webpage

I am trying to personalize the cursor of my webpage and managed to do so. However, there seem to be certain (random?) parts of the page where the cursor appears as the default version and not as the personalized cursor I had set. Does anyone know how I can resolve this? I added a element in my HTML document to set the background picture of my site and also used it to set the cursor for the entire body of the page. In my CSS file, I also specified that all links should be my personalized cursor (for some reason it otherwise did not show the personalized cursor on the links).

Here is part of my code in case that is helpful:

<style>
body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
cursor: url("speakercursor3.png"), auto;
}
</style> 

And this code in the CSS file: a { cursor: url("speakercursor3.png"), auto;}

Thank you so much for your help!

question from:https://stackoverflow.com/questions/66049865/custom-cursor-css-not-working-on-certain-parts-of-the-webpage

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Browsers manage your cursor visibility outside of your <body> tag. On this jsfiddle sample you can see that when you are outside of the blue borders, your cursor will default. Browser will also default your cursor when you are too close to the edges, or in some cases if your cursor goes outside of your browser, it will default. You can observe all in the sample. In your specific case you need to position your elements in a different way or give your body enough height so your elements are contained within it. Latter is not ideal but for PoC here is the demo.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...