My custom cursor is not working outside of content Options

[EleanorFox]

Hello. So I have this website https://jsfiddle.net/EleanorFoxQueen/sqLd1wxf/2/ and the cursor when moved outside of the body it will be back to the default cursor. Any idea how to fix this? Thankyou so much

Well nothing I tried works so I'll let you know if I have tried your answer or not

[pandy]

How do you mean? It doesn't show for body either. You've specified a custom cursor for certain elements. It will show when those elements are hovered, not for other elements. If you want it for the whole page, use cursor with body.

[EleanorFox]

How do you mean? It doesn't show for body either. You've specified a custom cursor for certain elements. It will show when those elements are hovered, not for other elements. If you want it for the whole page, use cursor with body.

Well the cursor is in the body tag and I set the body width to 100% but it doesn't work. Like just hover it away from the content and the default one will be back. And also how are you not seing my custom cursor? It's a public google drive link 🤔

[EleanorFox]

How do you mean? It doesn't show for body either. You've specified a custom cursor for certain elements. It will show when those elements are hovered, not for other elements. If you want it for the whole page, use cursor with body.

Well the cursor is in the body tag and I set the body width to 100% but it doesn't work. Like just hover it away from the content and the default one will be back. And also how are you not seing my custom cursor? It's a public google drive link 🤔

maybe you can use this actually website to see the error then https://eleanor-bit.neocities.org/

[coothead]

Hi there EleanorFox,

the body will only be visible at a width greater than 965px.

On my screen 1366x768, I was only able get the JSfiddle
display to expand to 941px.

Try testing your code in an actual browsr, instead.

coothead

[EleanorFox]

Hi there EleanorFox,

the body will only be visible at a width greater than 965px.

On my screen 1366x768, I was only able get the JSfiddle
display to expand to 941px.

Try testing your code in an actual browsr, instead.

coothead

Hello coothhead, here's my website uploaded https://eleanor-bit.neocities.org
Hope this will make you figure out the problem

[EleanorFox]

For people who can't see the problem, here's a video of it
https://www.facebook.com/100087079961096/vi...649462200374270

[Christian J]

How do you mean? It doesn't show for body either. You've specified a custom cursor for certain elements. It will show when those elements are hovered, not for other elements. If you want it for the whole page, use cursor with body.

Well the cursor is in the body tag and I set the body width to 100% but it doesn't work.

No, it's for the DIV #parent, which is only 965px wide. The CSS below is from https://eleanor-bit.neocities.org/

CODE

#parent{
width: 965px;
height: 100%;
white-space: initial;
word-break: break-word;
margin: 0 auto;
padding: 0;
cursor: url("https://drive.google.com/uc?export=download&id=1j1N4eTkIaf_AjdrdtA1UZqt4p39MfFZf"), default;
}

BTW you shouldn't use DIV elements for everything, they lack any semantic meaning.

[pandy]

Exactly. And it is in your CSS, not in any tag, BODY or other.

[coothead]

. For people who can't see the problem, here's a video of it
. https://www.facebook.com/100087079961096/vi...649462200374270

In that case you will need another custom cursor for the body.
Here is one that I have just made...

 my_mouse_pointer_white.zip ( 664bytes ) Number of downloads: 106


Open the zip file and upload the cur file to your images folder.

This would then be your amended CSS...

CODE

body{
  width: 100%;
  height: 100%;
  background: black;
  background-size: 100% 100%;
  background-repeat: repeat;
  background-attachment: fixed;
  margin: 0 auto;
  padding: 0;
  cursor: url("images/my-mouse-pointer-white.cur"), default;
}

I trust that this will help.

coothead

[EleanorFox]

How do you mean? It doesn't show for body either. You've specified a custom cursor for certain elements. It will show when those elements are hovered, not for other elements. If you want it for the whole page, use cursor with body.

Well the cursor is in the body tag and I set the body width to 100% but it doesn't work.

No, it's for the DIV #parent, which is only 965px wide. The CSS below is from https://eleanor-bit.neocities.org/

CODE

#parent{
width: 965px;
height: 100%;
white-space: initial;
word-break: break-word;
margin: 0 auto;
padding: 0;
cursor: url("https://drive.google.com/uc?export=download&id=1j1N4eTkIaf_AjdrdtA1UZqt4p39MfFZf"), default;
}

BTW you shouldn't use DIV elements for everything, they lack any semantic meaning.

Oh okay. Thankyou so much for y'all help. I'm so dumb -_-

This post has been edited by EleanorFox: Jun 15 2023, 12:41 AM

[Christian J]

On my screen 1366x768, I was only able get the JSfiddle
display to expand to 941px.

That sounds like pretty severe limitation in JSFiddle, especially in this age of media queries.

[Christian J]

Oh okay. Thankyou so much for y'all help. I'm so dumb -_-

You're welcome. We all are.

[Jason Knight]

Warning, I don't mean this to be mean. But I'm not going to sugar coat this either.

Looking at this you've got way bigger problems than custom cursor issues. Such as:

Why are you declaring a fixed width layout?

Why are you slopping style into the markup where it has no business being?

What's with the non-semantic DIV soup?

Why are you telling large swaths of users to go plow themselves by declaring everything in PX?

And I suspect you're also using images for things that shouldn't even be images. Type of thing that happens when a Photoshop jockey thinks they know what design is. Most don't!

I'd have to see the actual images, but on the whole I'd take some time to actually learn HTML, then throw this entire wreck out and start over. This is a laundry list of how NOT to use HTML.

You could start by learning that there are more tags that go into your markup than DIV, That and 100% of the time you see <style> and 95% of the time you see style="" you're looking at utter and total rubbish practices. A middle finger to sane and rational web development.

Also the marquee tag is inaccessible garbage that was stricken from HTML 25 years ago.

This post has been edited by Jason Knight: Jun 15 2023, 06:14 PM

[pandy]

Interesting. So what spec was marquee actually in?

[coothead]

. So what spec was marquee actually in?

I believe that the marquee element was introduced in HTML 3.2
and was present in HTML 4.01, but was then deprecated and is
not included in the HTML5 specification.

I am sure that Jason Knight will correct me if my memory is
mistaken and provide you with more detailed information.

coothead

This post has been edited by coothead: Jun 16 2023, 05:32 PM

[Christian J]

Looking at this you've got way bigger problems than custom cursor issues. Such as:

Why are you declaring a fixed width layout?

Why are you slopping style into the markup where it has no business being?

What's with the non-semantic DIV soup?

Why are you telling large swaths of users to go plow themselves by declaring everything in PX?

And I suspect you're also using images for things that shouldn't even be images. Type of thing that happens when a Photoshop jockey thinks they know what design is. Most don't!

You may have more success converting the OP to good design practices if you also elaborate on why the above issues are problematic...

[pandy]

I am sure that Jason Knight will correct me if my memory is
mistaken and provide you with more detailed information.

I doubt that. Marquee has been nonstandard all along. It was never in any spec.

[Christian J]

It almost made into CSS3 though, as late as 2008 when you'd think W3C would have known better - or maybe they were just joking? https://www.w3.org/TR/2008/CR-css3-marquee-20081205/

"Blink" was more successful: https://www.w3.org/TR/css-text-decor-3/#pro...decoration-line

[Jason Knight]

Interesting. So what spec was marquee actually in?

You caught me! Technically it was never ACTUALLY part of HTML. It was vendor specific, though it was mentioned by name as rejected in one of the HTML 4 drafts alongside EMBED. (or at least the W3C's discussions of such)

After all the whole point of 4 Strict was to simplify the language and reduce the number of tags.

Which is why it's so aggravatingly stupid the WhatWG put EMBED back in. But then I disagree with a lot of what they did with HTML 5.