Question

为什么按钮'1'只能按一次？第一次点击后它不会响应。它发生在我添加高度= 100％之后，但我仍然无法理解为什么。

Javascript用于我计划添加的其他按钮。

感谢所有可以提供帮助的人！

<html>
<head>
<style>

html,body
{
height: 100%;
}
body {
background-color: white;
width: 960px;
margin: auto;
position: relative;
}

.one {
background-color:blue;
color: black;
font-size: 45px;
text-decoration: none;
text-align: center;
width: 60px;
height: 60px;
overflow:hidden;
float:left;
position:absolute;
transition: .5s ease;
top: 250px;
left: 240px;
text-align: center;
}
.one:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
color: #21211e;
font-size: 45px;
vertical-align: center;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);;
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index:0;
}

.overlay:target {
visibility: visible;
opacity: 1;
}

.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}

.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}

.popup .close:hover {
color: orange;
}

.popup .content {
max-height: 30%;
overflow: auto;
}

</style>
</head>
<body>

<a class="one" id="one" href="#popup1" onclick="changeZIndex(this)">1</a>
<div id="popup1" class="overlay">
<div class="popup">
    <h2>Here i am</h2>
    <a class="close" href="#">×</a>
    <div class="content">
        1
    </div>
</div>
</div>

<script type="text/javascript">
function changeZIndex(elm) {
    if (elm.className == "one") {
        document.getElementById('one').style.zIndex = -1;
    }
}
</script>
</body>
</html>

Answer 1

你在这里看到的问题是Z-index的事情。基本上，您可以看到按钮，但是您将鼠标悬停在它前面的对象上。对于可点击的链接，不能用具有较低Z-index的内容覆盖。

按钮无法按两次

1 个答案: