从哪儿冒出来，我的按钮停止工作。我试图将其缩小到导致问题的原因，每当我在我的css- 中添加以下代码段时都会发生这种情况
#filler{
position:relative;
left:340px;
top:85px
}
它一直在工作，突然不起作用，但只有当我尝试定位它时。这是我所有的代码供参考：
function myFunction() {
$('#Asterisk').empty();
for (var i = 0; i < 7; i++) {
for (var a = i; a < 7; a++) {
$('#Asterisk').append("*");
}
$('#Asterisk').append("<br>");
}
}#Obelix {
border: 8px solid black;
width: 400px;
height: 200px;
position: relative;
left: 250px;
top: 100px
}
#Getafix {
width: 400px;
height: 200px;
position: relative;
left: 75px;
bottom: 126px
}
#Asterisk {
position: relative;
right: 325px;
top: 10px;
transform: rotate(180deg)
}
#mainwrapper {
height: 4000px;
width: 4000px;
position: relative
}
#filler {
position: relative;
left: 340px;
top: 85px
}
#filler {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
#filler:hover {
background-color: #3e8e41
}
#filler:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/looping.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="looping.js">
</script>
</head>
<div id="mainwrapper">
<body>
<button id="filler" onclick="myFunction()"> Fill in the box </button>
<div id="imgbox"> </div>
<div id="Obelix">
<div id="Asterisk"> </div>
<div id="Getafix"> </div>
</div>
</div>
</html>问题是，你的#Getafix div 就在按钮上方，只要你定位它。您可以使用 z-index 来更改此顺序。例如
button {
z-index: 1;
}
编辑：我为#Getafix 添加了一个几乎透明的浅色背景色，因此您可能会看到它的位置。如果您无法选择使用 z-index（因为您需要它在按钮上方的视觉效果），您可以pointer-events: none;在 #Getafix div 上使用。这会导致#Getafix 忽略所有点击事件，而是传递给底层按钮。不幸的是，浏览器对 poiner-events 的支持很一般（没有 ie10 或以下的支持）：http ://caniuse.com/#feat=pointer-events
function myFunction(){
$('#Asterisk').empty();
for(var i =0;i<7;i++) {
for(var a=i;a<7;a++) {
$('#Asterisk').append("*");
}
$('#Asterisk').append("<br>");
}
}#Obelix{
border:8px solid black;
width:400px;
height:200px;
position:relative;
left:250px;
top:100px}
#Getafix{
width:400px;
height:200px;
position:relative;
left:75px;
bottom:126px;
background-color: rgba(0,0,0,.1); /* making the #Getafix div position visible */
}
#Asterisk{
position:relative;
right:325px;
top:10px;
transform:rotate(180deg)
}
#mainwrapper{
height:4000px;
width:4000px;
position:relative}
#filler{
position:relative;
z-index: 1;
left:340px;
top:85px
}
#filler {
padding: 15px 25px;
font-size: 24px;
text-align: center;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
#filler:hover {background-color: #3e8e41}
#filler:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="css/looping.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="looping.js"> </script>
</head>
<div id="mainwrapper">
<body>
<button id="filler" onclick="myFunction()"> Fill in the box </button>
<div id="imgbox"> </div>
<div id="Obelix">
<div id="Asterisk"> </div>
<div id="Getafix"> </div>
</div>
</div>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句