Question

我最近在尝试创建风格化链接时遇到了一个问题。该链接的样式看起来像一个扁平的物理按钮。当用户点击链接时，我们希望它的行为有点像按钮，因此“按钮”向下移动4个像素。

我这样做是通过在底部有边框的标签中设置div。当a标签为：active时，div底部的边框会缩小4个像素，并且在标签的顶部添加了一个填充，以便将“按钮”div向下移动。

问题：

如果用户点击div的最顶部，则4像素的位移会导致链接不会触发，即使用户仍在点击标记。

我已经尝试了各种迭代：'通过位置相对'动画'div，a标签上的边框甚至隐藏/显示间隔div（仍在a标签内）。什么都行不通（在不同的浏览器中尝试过，只是为了看看是不是这样，没有帮助）。我想知道为什么会这样。

这是一个指向问题示例的JSBin链接：http://jsbin.com/eminuk/4/edit

在示例中，我将a标签的背景颜色设置为红色，以便它非常清晰。打开控制台（单击时每个元素都在控制台外面）。单击灰色按钮的最顶部。

Answer 1

我花了一段时间，但我找到了解决方案！只需改变

.btn-link:active { padding-top: 4px; }

到

.btn-link:active { padding-top: 4px; margin-top:-4px; }

它稍微改变了动画（它将背景向上移动而不是向前移动），但它几乎完全相同且完全可点击

Answer 2

做这样的事情怎么样......

<a href="#" class="my-btn">
  <img src="my-btn-image.png" alt="">
</a>

和css ...

.my-btn {
  display: block;
  width: 150px;
  height: 25px;
}

.my-btn img {
  display: block;
  position: relative;
}

.my-btn:active img {
  top: 4px;
}

在我看来，创建一个“动画”点击按钮的更好方法是使用一个小按钮精灵。在下面的情况中，您将创建一个75像素高的图像，每个状态（向上，向上/悬停和向下/单击）占据图像的25像素夹头。

<a href="#" class="my-btn">My Button</a>

和css ...

.my-btn {
  display: block;
  width: 150px;
  height: 25px;
  background-image: url(my-btn-image.png);
  background-position: top;
  text-indent: -9999px;
}

.my-btn:hover {
  background-position: center center;
}

.my-btn:active {
  background-position: bottom;
}

注意：如果您愿意，可以将背景位置设置为像素值（0 0，-25px 0和-50px 0）。

标签点击检测

2 个答案: