2

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

我通过在底部有边框的标签内放置一个 div 来做到这一点。当 a 标签为 :active 时，div 底部的边框会缩小 4 个像素，并且 a 标签顶部会添加一个填充以将“按钮”div 向下移动。

问题：

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

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

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

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

4

2 回答 2

1

我花了一段时间，但我找到了解决办法！只是改变

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

至

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

它只是稍微改变了动画（它有点将背景向上移动而不是从正面向下移动），但它几乎相同并且完全可点击

于 2013-06-27T21:17:10.327 回答
0

不如做这样的事情...

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

但在我看来，创建“动画”单击按钮的更好方法是使用小按钮精灵。在下面的例子中，您将创建一个 75px 高的图像，每个不同的状态（向上、悬停/悬停和向下/单击）占用 25px 的图像。

<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）。

于 2013-06-27T20:35:10.450 回答