单击带负z-index的div

Question

我创建了两个div，它们旋转并在点击按钮时给出透视，并显示隐藏的div z-index:5。但由于外部div的重叠，我无法选择隐藏div的元素。我尝试给出正面的z-index但是隐藏的div出现在前面，这是不想要的。有没有办法可以点击隐藏div中的元素，同时保持我的z-index为负，即相同。

＆＃13;

＆＃13;

$('#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');
});

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

＆＃13;

＆＃13;

$(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');
	});
})

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

$('#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: 50%;
  width: 100%;
  z-index: -5;
  margin: auto;
  top: 44px;
  left: 0;
  bottom: 0;
  right: 0;
}

.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;
}

.hidden.bar {
  z-index: 9999;
}

<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>

Answer 3

这对你有用吗？我已从代码中触发了#yum中的点击事件。

＆＃13;

＆＃13;

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

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

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;