CODEWITHSUNDEEP
javascriptcss
dezman
dezman

Reputation: 19368

Is it possible to give the cursor z-index?

I am guessing no, but it would be really sweet to be able to set the z-index of the cursor with CSS or Javascript.

Let's say you've got some buttons and you want to add a semi-transparent image on top of the buttons for effect. Or in my current case, some SVG paths that have hover and click actions. If I could set the button or SVG z-index to 0, my cursor's z-index to 1 and the image overlays z-index to 2, that would be pretty sweet! The mouse would be going under the overlay and still be able to click on the buttons. It would be even more spectacular to set the visual z-index (which layer the cursor appears to be), separate from the effective z-index (which layer the cursor actually is). So the cursor could appear to be on top of the overlay, but still be able to click on the buttons underneath.

I have my doubts, but I thought I would check if anyone has heard of someone doing this or something like it.

Upvotes: 6

Views: 9355

Answers (3)

Izzi
Izzi

Reputation: 2622

Since no answer has been accepted, I want offer the right answer.

The pointer-events: none is the solution.

See simple CSS example:

.emotion_message {
    pointer-events: none;
    background-color: rgb(144,238,144,0.5);
    height: 20%;
    width: 94%;
    position: absolute;
    top: 40%;
    color: darkgreen;
    padding: 1%;
    text-align: center;
    border-radius: 10px;
    margin-left:3%;
    margin-right:3%;
}

In this example, I wanted to display a chart, with a static summary box over the top, but I wanted the cursor to interact with the chart underneath. I also added opacity to the background-color, so the user can both see and interact with the submerged element (in this case the chart). Now the user sees the box, but the cursor does not.

Thanks @FabricioMatte for this answer in the comments.

Upvotes: 10

John Riselvato
John Riselvato

Reputation: 12924

There is no such thing as a cursor z-index.. what you can do is have a jQuery hover function that gets the object that the cursor is hovering over, which in return allows you to find the objects z-index. So really instead of wanting a cursor to have z-indexes, just have hover states.

Then have custom cursors depending on location. Which as everyone is saying cursor:none would be fun to play with for this. Say you want to go under a alpha block, you could just render a cursor under that alpha block to get the effect of the cursor being under it.

Upvotes: 1

Levi Kovacs
Levi Kovacs

Reputation: 1159

You can play with the cursor:none;

See a related Q: Is it possible to put the mouse cursor behind an element or does the mouse cursor have an z-index?

Upvotes: 1

Related Questions