New Customer Cursor (Hover state)

[KingJut]

The new Custom Cursor is a great addition to Lay Theme, but I can't seem to find an option to change the cursor when in a hover state.

Any tips, or ideas on how this part works?

[Richard]

Dear @KingJut

Technically the cursor is always hovering, and the 'hoverstate' is applied to what it hovers over. What where you thinking of it hovering over ? E.g a Link, An image etc 🌝

---

Best

Richard

[KingJut]

Hi @Richard and thanks for your reply.

That's correct, I have images that are links on my demo site and there is no interaction with the cursor to highlight these as clickable.

I did have some custom CSS where I tweaked the two different states:

  body {
        cursor: url(http://v04.347.myftpupload.com/wp-content/uploads/2022/03/Cursor_nonhover.png) 64 64, auto;
    }

    a {
        cursor: url(http://v04.347.myftpupload.com/wp-content/uploads/2022/03/Cursor-1.png) 64 64, auto !important;
    }

Which loaded a different (larger) cursor image to make it obvious there was an interaction — it's a bit clunky, as in it just flicks to the image, but I've seen sites where the cursor gently grows and shrinks, like rolls-royce website cursor.

How can this be done with the new cursor in Lay Theme?

[Richard]

Dear @KingJut

Lay Theme uses the normal cursor like you have applied with the code above; cursor: url("source");

The Rolls Royce website uses a trick that has become widespread now. It's actually a div or html element that has javascript applied to it to mimic the cursor ( x and y axis position on screen ).

Within the code the native cursor has been removed:

Normally when taking a screenshot the cursor would not be captured, this also helps us know its an HTML element:

The Rolls Royce Cursor CSS:

.rrmc-cursor {
display: block;
    top: 0px;
    transform: translate3d(688px, 323px, 0px);
    position: absolute;
    width: 46px;
    height: 46px;
    top: 0;
    left: 0;
    z-index: 6000;
    pointer-events: none;
    display: none;
    mix-blend-mode: difference;

It's using transform: translate3d('value'); but you could also use the CSS 'scale' or 'zoom' properties.

These links may help you add scaling or zoom to the default cursor but the problem lies with transitioning between the two. An interesting mention in one of these links is to use a gif to mimic the effect:

https://stackoverflow.com/questions/38767322/css-cursor-transition

https://css-tricks.com/almanac/properties/c/cursor/

https://stackoverflow.com/questions/33715491/how-to-reduce-the-size-of-image-with-cursor-url

https://www.digitalocean.com/community/tutorials/css-cursor-property

And this is a custom HTML cursor

https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/

---

Best

Richard