How to make custom cursor display over image?

Question

I'm building a portfolio site for myself and I made a custom cursor that follows the default one, by creating an empty div, styling it as a small circle, and making it trail behind the default cursor with Javascript. All of that works fine.

The problem is that once the cursor moves over an image, the circle is displaying under it.

HTML

<div class="cursor"></div> <img src="https://steamuserimages-a.akamaihd.net/ugc/268338039154053677/D41BD0C4419DBF35C84CB17B2737B065504B1858/" alt="">

CSS

.cursor { height: 15px; width: 15px; border: 1px solid #0b0d0f; border-radius: 50%; position: absolute; transition-duration: 200ms; transition-timing-function: ease-out; pointer-events: none; }

JavaScript

const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', e => { console.log(e); cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;") })

I would expect the custom cursor to hover over the image along with the default cursor, but instead is displays under it.

By "under" do you mean "lower on the page on the Y axis" or "behind and obscured by on the Z axis"? If the latter, have you tried setting either or both elements' z-index property? — Jordan Running
– Jordan Running, Commented Apr 18, 2019 at 21:55
I did mean obscured on the Z axis. Thanks, setting the z-index fixed it. — D99-9.24
– D99-9.24, Commented Apr 18, 2019 at 22:00

jirassimok · Accepted Answer · 2019-04-18 22:09:47Z

Give the hovering element a higher z-index in the CSS to make it appear in front of other elements (jsfiddle).

However, this may be a browser-specific problem—it works for me even without the z-index set.

Collectives™ on Stack Overflow

How to make custom cursor display over image?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related