Question

我的页面有一个重叠的div，它将在5秒后隐藏。但是，我意识到div后面的按钮无法按下，因为div在5秒后仍然存在。

要删除div，我尝试使用display:none，但它不起作用。

这是我的css：

.ox-messages {
    -webkit-animation: seconds 1.0s forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 5s;
    animation: seconds 1.0s forwards;
    animation-iteration-count: 1;
    animation-delay: 5s;
    position: relative;
}

@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px;
    //display: none;
  }
}
@keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
    //display: none;
  }
}

问题如下：

警告信息（绿色）与按钮重叠（音符加图标）。

请帮助和谢谢。

编辑：我将position:relative更改为position:absolute，它不会阻止按钮，但会将消息堆叠在一起。

Answer 1

请随意在任何html编辑器中复制并粘贴此代码（或按下面的代码片段），您将看到JavaScript函数确实会删除div。在此示例中，网站中不会显示任何文本，因为我们使用JavaScript删除了包含文本的div：

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	
<div id="div_we_want_to_remove">
    <!-- We will not see the following text on the webpage if we execute the the JavaScript code that I included -->
    <p1> It is possible to get rid of this text using javascript</p1>
</div>
<script>
//this is the JavaScript code that's needed to get rid of that div
function remove_div() {
    var elem = document.getElementById('div_we_want_to_remove');
    elem.parentNode.removeChild(elem);
    return false;
}
//remove_div literally will remove the div
remove_div();

</script>

</html>

＆＃13;

Answer 2

当你隐藏它时，你可以在该div上设置modulereload(math)，它不会再妨碍

Answer 3

设置visibility: hidden，然后该元素将从文档中隐藏。使按钮后面的按钮可以点击。

.ox-messages {
    -webkit-animation: seconds 1.0s forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 5s;
    animation: seconds 1.0s forwards;
    animation-iteration-count: 1;
    animation-delay: 5s;
    position: relative;
    height: 200px;
    width: 500px;
    background: red;
    position: absolute;
    top: 0;
}

@-webkit-keyframes seconds {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes seconds {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

<button>TEST</button>
<div class="ox-messages"></div>

使用CSS在5秒后删除重叠的div

3 个答案: