Question

我有问题。在我website上。我有一个按钮，当我点击它时，我想把我送到另一个link但是只有当我把它推到下半部分时它才有效。

这是代码：

<div id="button" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'">
<div id="butttop" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
<div id="buttbottom" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
<div id="buttbody" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
<div id="buttfloor" onclick="location.reload();location.href='http://andreicarpen.com/cv.pdf'"></div>
</div>

#button {


  height: 130px;
  width: 300px;
  margin-top:37%;
  position: absolute;
 left:50%;
 margin-left: -150px;
  cursor:pointer;

}

#button div {
  position: absolute;

}

#buttfloor {
  height: 50px;
  width: 300px;
  background: #34495e;
  border-radius: 50%;
  margin-top: 80px;
  z-index: 1;

}

#butttop {
  background: #e74c3c;
  height: 40px;
  width: 250px;
  border-radius: 50%;
  z-index:3;
  margin-left: 25px;
   -webkit-transition: all .2s;
  -moz-transition: all .2s ;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;

}

#buttbottom {
  background: #c0392b;
  height: 40px;
  width: 250px;
  border-radius: 50%;
  margin-top: 80px;
  margin-left: 25px;
  z-index:2;

}

#buttbody {
  background: #c0392b;
  height: 80px;
  width: 250px;
  border-radius: 0;
  margin-top: 20px;
  margin-left: 25px;
  -webkit-transition: all .2s;
  -moz-transition: all .2s ;
  -ms-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
  z-index:2;

}

#button:active #buttbody{
  height: 40px;
  margin-top: 60px;

} 

#button:active #butttop{
  margin-top: 40px;

}

Answer 1

如果你摆脱了这两个：

#button:active #buttbody{
  height: 40px;
  margin-top: 60px;

} 

#button:active #butttop{
  margin-top: 40px;

}

可点击。 Here's a jsfiddle for it

锚只在按钮的下半部分工作

1 个答案: