Different mouse hover cursor function for disabled button

[Edrol97]

Hi all,

I have a disabled class on a button that I want to add a cursor :hover effect to. I tried the following:

.content .reset-btn:disabled :hover {
  cursor: url(img/background/cursors/Mouse%20cursor), auto;
}

which didn't work so am wondering if this requires calling a js function or if it can just be done with html and css. Any tips?

 

[Johna]

Hi there. This should be possible with just CSS. You seem to be missing the file extension in the path.

 

[Edrol97]

Hi there. This should be possible with just CSS. You seem to be missing the file extension in the path.

Aha, I've got that on there now but it's still not working as it should. It's still got the pointer style image that I have acting as the cursor. This is what I've got now.

.content .reset-btn:disabled :hover {
  cursor: url(img/background/cursors/Mouse%20cursor.png), auto;
}

</div>
        <button class="reset-btn">Next</button>
      </div>

 

[Johna]

There shouldn't be any space before :hover, so it should be like this instead:

.content .reset-btn:disabled:hover {
  cursor: url(img/background/cursors/Mouse%20cursor.png), auto;
}