Is it possible to give the cursor z-index?

Question

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.

Answer 1

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.