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
  • 1K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Taywin

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.