jquery - 单击具有负 z-index 的 div

Question

我创建了两个 div，它们旋转并在单击按钮时给出透视图，并显示一个带有 z-index:5 的隐藏 div。 .但是由于外部 div 的一些重叠，我无法选择隐藏 div 的元素。我尝试提供正 z-index，但随后隐藏的 div 出现在不想要的前面。有什么方法可以让我在隐藏的 div 中单击元素，同时保持我的 z-index 为负值，即相同。

$('#split-me').click(function() {
  $('.top').toggleClass('slide-up');
  $('.bottom').toggleClass('slide-down');
  $('.hidden').toggleClass('bar');
});

$('#yum').click(function() {
  $('.top').toggleClass('zoo');
  $('.bottom').toggleClass('zoo');
  $('.wrapper').toggleClass('lost');
});

* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

html,
body {
  height: 100%;
}

.top {
  background-color: #3498db;
  height: 100%;
  position: absolute;
  width: 100%;
  //box-shadow: 0 0 12px rgba(0,0,0,.50);
  top: 0%;
  transition: 2s top;
}

.bottom {
  background-color: #ecf0f1;
  height: 100%;
  position: absolute;
  width: 100%;
  //  box-shadow: 0 0 10px rgba(0,0,0,.45);
  top: 0%;
  transition: 2s top;
}

.wrapper {
  position: relative;
  height: 50%;
  min-height: 200px;
  perspective: 600px;
}

.slide-up {
  top: -10%;
  transform: rotateX(-5deg);
  transform-style: preserve-3d;
}

.slide-down {
  top: 10%;
  transform: rotateX(5deg);
  transform-style: preserve-3d;
}

.hidden {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -5;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:black;
}

.hidden h2 {
  height: 20px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  color: #3498db;
}

.btn {
  margin: auto;
  position: absolute;
  top: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  background: #FFF;
  height: 15px;
  width: 25px;
  padding-top: 40px;
  border-radius: 5px;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  text-decoration: none;
  color: #3498db;
  z-index: 100;
  transition: .25s all;
  box-shadow: 0 0 0 4px #3498db, 0px 0 0 8px white, 0px 0 10px 0 rgba(0, 0, 0, .5), 0px 0 10px 10px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.btn:hover {
  box-shadow: 0 0 0 10px #3498db, 0px 0 0 20px white, 0px 0 15px 0 rgba(0, 0, 0, .5), 0px 0 10px 20px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.zoo {
  opacity: 0;
  transition-property: opacity, left, top, ease-in-out;
  transition-duration: 2s, 2s, 0s;
  transition-delay: 2s, 2s, 2s;
}

.lost {
  transform: rotateX(69deg);
  transition: transform 2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="top">
    <a class="btn" href="#" id="split-me"></a>
    raghav
  </div>
</div>

<div class="hidden">
  <h2 id="yum">I like Nachos!</h2>
</div>

<div class="wrapper">
  <div class="bottom">
    patnecha
  </div>
</div>

在上面的代码片段中，我想单击 <h2 id="yum">I like Nachos!</h2>这样我就可以运行点击事件。

Answer 1

$(document).ready(function () {
	$('#split-me').click(function() {
		if($('.hidden').hasClass('bar')) {
			$('.trap').hide();
		}
		else {
			$('.trap').show();
		}
		$('.top').toggleClass('slide-up');
		$('.bottom').toggleClass('slide-down');
		$('.hidden').toggleClass('bar');
	});

	$('#yum').click(function() {
		$('.top').toggleClass('zoo');
		$('.bottom').toggleClass('zoo');
		$('.wrapper').toggleClass('lost');
	});
})

* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

html,
body {
  height: 100%;
}

body {
  position: relative;
	overflow: hidden
}

.top {
  background-color: #3498db;
  height: 100%;
  position: absolute;
  width: 100%;
  //box-shadow: 0 0 12px rgba(0,0,0,.50);
  transition: 2s top;
	top: 0;
}

.bottom {
  background-color: #ecf0f1;
  height: 100%;
  position: absolute;
  width: 100%;
  //  box-shadow: 0 0 10px rgba(0,0,0,.45);
  transition: 2s top;
	top: 0;
}

.wrapper {
  height: 50%;
  min-height: 200px;
  perspective: 600px;
	position: relative;
	z-index: 4;
}

.slide-up {
  top: -10%;
  transform: rotateX(-5deg);
  transform-style: preserve-3d;
}

.slide-down {
  top: 10%;
  transform: rotateX(5deg);
  transform-style: preserve-3d;
}

.trap {
	display: none;
	z-index: 5;
}

.trap h2 {
	color: transparent;
}

.hidden {
	position: absolute;
  height: 100%;
  width: 100%;
  z-index: -5;
  top: 0;
  left: 0;
  display: block;
	background: black;
}

.hidden h2, .trap {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 52%;
  left: 50%;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  color: #3498db;
}

.btn {
  margin: auto;
  position: absolute;
  top: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  background: #FFF;
  height: 15px;
  width: 25px;
  padding-top: 40px;
  border-radius: 5px;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  text-decoration: none;
  color: #3498db;
  z-index: 100;
  transition: .25s all;
  box-shadow: 0 0 0 4px #3498db, 0px 0 0 8px white, 0px 0 10px 0 rgba(0, 0, 0, .5), 0px 0 10px 10px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.btn:hover {
  box-shadow: 0 0 0 10px #3498db, 0px 0 0 20px white, 0px 0 15px 0 rgba(0, 0, 0, .5), 0px 0 10px 20px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.zoo {
  opacity: 0;
  transition-property: opacity, left, top, ease-in-out;
  transition-duration: 2s, 2s, 0s;
  transition-delay: 2s, 2s, 2s;
}

.lost {
  transform: rotateX(69deg);
  transition: transform 2s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
	<div class="top">
		<a class="btn" href="#" id="split-me"></a>
		raghav
	</div>
</div>

<div class="trap">
	<h2 id="yum">I like Nachos!</h2>
</div>

<div class="hidden">
	<h2 id="yum">I like Nachos!</h2>
</div>

<div class="wrapper">
	<div class="bottom">
		patnecha
	</div>
</div>