jquery - 由于具有 :active pseudo-class 的 "pressed button"效果，点击事件未触发

Question

我正在尝试使用 css“:active”伪类在单击时为 div 设置动画。 div 向右移动 10 个像素，向下移动 10 个像素:

#myButton:active {
    margin:10px 0 0 10px;
}

请在此处查看完整示例:http://jsfiddle.net/WdABS/

问题是，如果您单击 div 的顶部或左侧边框(在 jsFiddle 示例中为红色)，则在释放按钮时鼠标指针不再位于 div 上。因此，mouseup 和 click 都不会被触发。

从技术上讲，这种行为非常合理。但是，这不是最终用户所期望的，我不知道如何以干净简单的方式修复它。我尝试在移动的 div 周围放置一个父容器，并从中捕获点击事件，但这似乎只会让事情变得更复杂，而且效果也不是很好。

感谢阅读!

Answer 1

纯 CSS:使用伪元素

这适用于 IE8+、Firefox 和 Chrome(所有这些都经过测试)。参见 this fiddle .

#myButton:active {
    margin:10px 0 0 10px;
}
#myButton:active:before {
    content: '';
    position: absolute;
    top: -20px; /* border plus shift amount */
    right: 0;
    bottom: 0;
    left: -20px; /* border plus shift amount */
}

您的 #myButton 将需要 position: relative 或 absolute 以便 :before 元素正确定位自身.

纯 CSS:移动边框本身 (CSS3)

如果按钮上还没有边框，则使用 border 属性本身(具有透明颜色)和 background-clip(不让按钮颜色与边框重叠)，您可以获得相同的功能。参见 this fiddle .

#myButton:active {
    border-top:10px transparent solid;
    border-left:10px transparent solid;
    background-clip: padding-box;
}