Question

我试图制作一个完全覆盖div元素的标签，点击后，按钮元素就会消失。 HTML：

我已经尝试将高度和宽度设置为100％，但这并不能完全填满整个区域...我该如何解决这个问题？

#startstorybutton {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 7.5vw;
  right: 20vw;
  z-index: 10;
  background-color: #f4511e;
  color: white;
  Font-size: 50px;
  font-style: italic;
  transition: all 0.6s;
  cursor: url(cursors/select.PNG), pointer;
}

#story {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Three_little_pigs_%28geograph_4633727%29.jpg/1200px-Three_little_pigs_%28geograph_4633727%29.jpg");
  background-size: 100%;
  height: 40%;
  width: 80%;
  margin: 0 auto;
}

<div id="story">
  <div>
    <p id="storytitle">The Three Little Pigs</p>

    <div>
      <p id="storybox"></p>
    </div>
    <div id="storybuttonsection">
      <button type="button" id="backbutton"><span>Go back</span></button>
      <p id="pagenumber">121212</p><button id="continuebutton"><span>Continue</span></button>
    </div>

  </div>
  <button type="button" id="startstorybutton">Start the story!</button>
</div>

Answer 1

你必须将按钮元素放在“隐藏元素”的顶部，如果你将主元素位置设置为相对，你可以将子元素绝对地放在它上面（top: 0; right: 0），高度和宽度到100％。

要隐藏按钮，最简单的方法是向按钮添加一个侦听器事件，然后使用javascript隐藏它（或删除它）。

#startstorybutton {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background-color: #f4511e;
  color: white;
  Font-size: 50px;
  font-style: italic;
  transition: all 0.6s;
  cursor: url(cursors/select.PNG), pointer;
}

#story {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Three_little_pigs_%28geograph_4633727%29.jpg/1200px-Three_little_pigs_%28geograph_4633727%29.jpg");
  background-size: 100%;
  height: 40%;
  width: 80%;
  margin: 0 auto;
  position: relative;
}

<div id="story">
  <div>
    <p id="storytitle">The Three Little Pigs</p>

    <div>
      <p id="storybox"></p>
    </div>
    <div id="storybuttonsection">
      <button type="button" id="backbutton"><span>Go back</span></button>
      <p id="pagenumber">121212</p><button id="continuebutton"><span>Continue</span></button>
    </div>

  </div>
  <button type="button" id="startstorybutton" onclick="this.style.display = 'none'">Start the story!</button>
</div>

Answer 2

我不太确定你的HTML结构。但是当你描述你的问题时，我已经为你创造了一个例子。

您需要对HTML进行更改，以使其简单明了。

故事div包含按钮，它将完全定位以适合整个div。

我已经抛出了一小部分jQuery来展示它的外观。

$(function(){
  $("button.overlay").click(function(){
    $(this).hide();
  });
});

.story{
	width: 250px;
	height: 100px;
	border: 1px solid black;
	text-align:center;
	position: relative;
}

.overlay{
	position: absolute;
	top:0px;
	left:0px;
	height: 100%;
	width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="story">
	Here goes the story!
	<button class="overlay">read story button</button>
</div>

在<div>元素上完全具有<button>标记

2 个答案: