Question

href属性在下面提到的代码中不起作用：

<section class="loginform" style="min-width: 600px; width: 70%; margin: 40px auto;">
<fieldset style="border-radius: 5px; padding: 5px;">
<legend>AA</legend> 
<label> <br> </label>
<style>
.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: -webkit-gradient(radial, 50% 120%, 0, 50% 120%, 100, color-stop(0%, #81e8f6), color-stop(10%, #76deef), color-stop(80%, #055194), color-stop(100%, #37526a));
  background: -webkit-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  background: -moz-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  background: -o-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  background: radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #37526a 100%);
  cursor:pointer;
}
.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: -webkit-gradient(radial, 50% 0px, 0, 50% 0px, 58, color-stop(0%, #ffffff), color-stop(58%, rgba(255, 255, 255, 0)));
  background: -webkit-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  background: -moz-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  background: -o-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  background: radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
  -webkit-filter: blur(5px);
  z-index: 2;
}

.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, color-stop(0%, rgba(0, 0, 0, 0.4)), color-stop(40%, rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0)));
background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
background: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
background: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
background: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-26px);
-moz-transform: rotateX(90deg) translateZ(-26px);
-ms-transform: rotateX(90deg) translateZ(-26px);
-o-transform: rotateX(90deg) translateZ(-26px);
transform: rotateX(90deg) translateZ(-26px);
z-index: -1;
}
.stage {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 10px;
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  -ms-perspective: 200px;
  -o-perspective: 200px;
  perspective: 200px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
</style>

<ul> 
<li>
<section class="stage">
  <figure class="ball"><span class="shadow"></span><div style="line-height:45px; color:#00FFFF; text-align:center; font-size:16px;">
    1</div></figure>
</section> </li>

<li>
<section class="stage">
  <figure class="ball"><span class="shadow"></span><div style="line-height:45px; color:#FFFF00; text-align:center; font-size:16px;">
   <a href="http://www.test.com/aaa.php"> Test</a>
</div></figure>
</section> </li>
</ul>
    </fieldset> </section>
</section>

你能帮我解决一下这个错误吗？请注意：在这里，如果我点击Test;网页未将点击事件导航到所需目的地。

Answer 1

问题出现是因为:before阻止：

.ball:before {
  position: absolute;
}

被定位为absolute其位置变为链接，然后显然链接不起作用。

为了防止你也可以将你的div链接定位为绝对（你也应该'使用z-index'来完成所有工作（或者只是为了'：'之前省略'元素根本。）

<div style="position:absolute; z-index:3;line-height:45px; color:#FFFF00; text-align:center; font-size:16px;">
   <a href="http://www.test.com/aaa.php"> Test</a>
</div>

错误：href属性在HTML <a> TAG</a>中不起作用

1 个答案: