span按钮顶部的click（）不起作用

Question

我一直在尝试使用简单的结构制作按钮：

<a href="#/category/portfolio/" class="filter" data-filter="*">
<span class="button">Tout</span>
</a>

它有效，除了按钮的顶部。我们可以点击它，CSS激活，但不是jQuery相关。

http://jsfiddle.net/vqrdW/

感谢您的帮助！

Answer 1

问题在于这条规则：

.button:active { 
   position: relative; 
   top: 3px;
}

当按钮向下移动3个像素时，释放鼠标按钮时，光标不在按钮上方，因此未注册动作。如果你注释掉这段代码，你会发现它解决了这个问题。

尝试使用不同的效果来按下按钮时不会将按钮移到一侧或另一侧。

Answer 2

在标签上添加填充而不是.button：

a.filter {
  padding: 8px 14px 10px;
}

Answer 3

.span:active {   
    pointer-events: none;
}

Answer 4

<a href="#/category/portfolio/" class="filter" data-filter="*">
<span class="button" style="display:block;width:100%;height:100%">Tout</span>
</a>

不工作......对不起...... 这是一个工作版本 编辑：

a.filter {
text-decoration:none;
display:block;
float:left;
line-height:40px; /*(or whatever is that button's height)*/
}