Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Cursor not working on scroll bar or gallery buttons

Edrol97

Well-Known Coder
Hi all,

Wondering how I can solve this. I want a custom cursor on both scrollbar and gallery buttons. I attach the code:

CSS:
body::-webkit-scrollbar {
    width: 1em round;
    overflow: scroll;
    cursor: url("img/background/cursors/pointer1.png"), pointer !important;
  }
 
  body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px #1e4cad;
  }
 
  body::-webkit-scrollbar-thumb {
    background-color: #1e4cad;
    outline: 1px solid #1e4cad;
    border-radius: 10px;
  }
  body::-webkit-scrollbar-thumb:hover{
    cursor: url("img/background/cursors/pointer1.png"), pointer !important;
  }

CSS:
.previous_button,
.next_button,
.close_button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    align-items: center;
    font-size: xx-large;
    position: absolute;
    color: white;
}
.previous_button,
.next_button,
.close_button:hover{
    cursor: url("img/background/cursors/pointer1.png"), pointer;}

Thanks,

El
 
Solution
Are we talking about cursors on hover of buttons or scrollbars

It's hover on my own buttons with an onclick() function. It looks like this, with each button housed in its own div.


HTML:
<div class="next_button" onclick="NextImage()"><img src="img/background/right-arrow.png"></div>
               <div class="previous_button" onclick="PreviousImage()"><img src="img/background/left-arrow.png"></div>
               <div class="close_button" onclick="CloseLightbox(1)"><img src="img/background/close-button.png"></div>
I'm not sure it's possible to apply a custom cursor to the scrollbar only. You could try putting an element behind it and giving that element a custom cursor, but I can't guarantee that'll work.
 
Yeah, it's probably not possible.
The thing is I've managed to do it previously in css, so I can't understand why it's not working this time. I'm doing this at the moment:

.previous_button,
.next_button,
.close_button:hover{
cursor: url("img/background/cursors/pointer1.png")};

and I'm not sure what's wrong with it
 
The thing is I've managed to do it previously in css, so I can't understand why it's not working this time. I'm doing this at the moment:

.previous_button,
.next_button,
.close_button:hover{
cursor: url("img/background/cursors/pointer1.png")};

and I'm not sure what's wrong with it

Does this work with a fallback in place?
 
Are we talking about cursors on hover of buttons or scrollbars

It's hover on my own buttons with an onclick() function. It looks like this, with each button housed in its own div.


HTML:
<div class="next_button" onclick="NextImage()"><img src="img/background/right-arrow.png"></div>
               <div class="previous_button" onclick="PreviousImage()"><img src="img/background/left-arrow.png"></div>
               <div class="close_button" onclick="CloseLightbox(1)"><img src="img/background/close-button.png"></div>
 
Last edited:
Solution
Back
Top Bottom