Question

我有一个代码就是这个

<a class="btn btn-default"><i class="fa fa-home"></i><span>Button Name</span></a>

我使用btn.active与

btn.active{
 position:relative;
 top: 1px;
 left: 1px;
}

为我的按钮添加一些不错的点击效果，但有一个奇怪的事情，1px在.btn元素中的任何元素之后被禁用它是不可点击的。您可以在http://jsfiddle.net/44cAy/1/

中看到

在该按钮的黑色边框之后，单击该事件时不会触发。为什么会这样，有没有办法解决？对不起，如果我的英语有任何错误，我就会这样做:)。

提前致谢。

Answer 1

添加它应该有效：

.btn:active:before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: 0;
  right: 0;
}

如果有意义的话，我们很容易通过移动元素向我们“失去”的区域添加区域。