Member Avatar for sun-tzu

i need to know weather or not there is a way to put the cursor below (z-index wise) a div element or make it so that you can click through the div element.

  • 2 Contributors
  • 3 Replies
  • 2K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

You cannot move the mouse cursor “below” an element. The browser hit-tests from the topmost painted box in the stacking context; z-index only changes paint order, not which element receives the click. (developer.mozilla.org)

If you want a visible overlay but still be able to click what is underneath, make the overlay ignore pointer input. The CSS is simple:

/* overlay is visible but click-through */
.overlay {
  position: absolute; inset: 0;
  pointer-events: none;
}

/* optional: let specific children still catch clicks */
.overlay .hit-area { pointer-events: auto; }
<div class="overlay"><!-- decoration, spinner, etc. --></div>

When pointer-events: none is set, the overlay will not be the target of mouse/touch events, so clicks fall through to elements underneath. You can toggle this at runtime if needed: overlay.style.pointerEvents = 'auto' (block clicks) or 'none' (pass-through). (developer.mozilla.org)

A couple of gotchas and tips:

  • Keyboard focus is not affected by pointer-events; an element with tabindex can still be focused via Tab. If the overlay is purely decorative, also remove it from interaction and the accessibility tree, e.g. <div class="overlay" inert></div>. The inert attribute disables click and focus for the element and its subtree. Use it only when hiding real content from assistive tech is appropriate. (developer.mozilla.org)
  • Support is broad in modern browsers (Chrome, Firefox, Safari, Edge, and IE11). Very old IE versions (<=10) did not support pointer-events on HTML elements; for those, restructure the markup or hide/remove the overlay instead of relying on z-index tricks. (caniuse.com)

Your z-index demo shows layer swapping; if the goal is “click-through,” switching to pointer-events usually means far less code and no z-index juggling. (developer.mozilla.org)

Recommended Answers

All 3 Replies

Member Avatar for Taywin

Hmm... Not sure what you mean here??? What do you mean by 'click through'? What do you mean by 'putting the cursor below a div element'? Could you show a sample snippet (a simple one) or HTML you already have?

Member Avatar for sun-tzu

I don't have an example... basically I just want the actual mouse cursor to be able to go under a div that I created so that I can click the thing that is under the div.

Member Avatar for Taywin

OK, so you mean you have multiple div layer located in one area, and you can click on the area to show different content layer using z-index?

If so, a simple sample code for the behavior is below.

<html>
<head>
<style="text/css">
div.displayArea{
  position: relative;
}

div.absoluteDisplayArea {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 80%;
  border: 1px solid gray;
}

div.div1 {
  opacity: 1;
  z-index: 1;
}

div.div2 {
  opacity: 1;
  z-index: 0;
}

div.div3 {
  opacity: 1;
  z-index: 0;
}

div.div4 {
  opacity: 1;
  z-index: 0;
}
</style>

<script type="text/javascript">
function clickThrough(thisElement, nextDivID) {
  var nextElement = document.getElementById(nextDivID)
  if (thisElement && nextElement) { // both elements exist
    nextElement.style.zIndex = 1
    thisElement.style.zIndex = 0
  }
}
</script>
</head>

<body>
  <div class="displayArea">
    <div class="absoluteDisplayArea div1" id="div1" onclick="clickThrough(this, 'div2')">
    This is content number 1
    </div>
    <div class="absoluteDisplayArea div2" id="div2" onclick="clickThrough(this, 'div3')">
    This is content number 2
    </div>
    <div class="absoluteDisplayArea div3" id="div3" onclick="clickThrough(this, 'div4')">
    This is content number 3
    </div>
    <div class="absoluteDisplayArea div4" id="div4" onclick="clickThrough(this, 'div1')">
    This is content number 4
    </div>
  </div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.