锚点只在按钮的下半部分工作 [英] Anchor working only in the lower half of the button

问题描述

我有一个问题。在我的网站上。我有一个按钮，当我点击它，我想送我到另一个链接但它的工作，只有当我推它在下半部。

I have a problem. On my website. I have a button and when I click it I want to send me to another link But it's working only if I push it on the lower half.

这是代码：

<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;

}

推荐答案

摆脱这两个：

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

} 

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

}

这是一个jsfiddle它

这篇关于锚点只在按钮的下半部分工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！