Is it possible to give the cursor z-index?

css, javascript

Solution

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.

Problem

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.

Original source