0

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
4
Views
6 Years
Discussion Span
Last Post by Taywin
0

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?

0

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.

0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.