单击事件不会因为"按下按钮"效果而触发:active pseudo-class

Question

我正在尝试使用css":active"伪类来点击它的动画.div向右移动10个像素,向下移动10个像素:

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

请参阅此处的完整示例:http://jsfiddle.net/WdABS/

问题是,如果你单击div的顶部或左边框(在jsFiddle示例中为红色),当释放按钮时,鼠标指针不再位于div上方.因此,无论是mouseup还是click都没有被触发.

从技术上讲,这种行为非常有意义.但是,这不是最终用户所期望的,我不知道如何以干净简单的方式解决它.我试图在移动的div周围放置一个父容器并从中捕获click事件,但它似乎只是使事情变得更复杂并且也不能很好地工作.

谢谢阅读!

Answer 1

纯 CSS：使用伪元素

这适用于 IE8+、Firefox 和 Chrome（所有这些都经过测试）。看到这个小提琴。

#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（使按钮颜色不与边框重叠），您可以获得相同的功能。看到这个小提琴。

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