9

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

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

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

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

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

谢谢阅读！

4

2 回答 2

5

纯 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：带有边框本身的 Shift (CSS3)

如果按钮上还没有边框，那么使用border属性本身（具有透明颜色）和background-clip（不让按钮颜色与边框重叠），您可以获得相同的功能。看到这个小提琴。

#myButton:active {
    border-top:10px transparent solid;
    border-left:10px transparent solid;
    background-clip: padding-box;
}
于 2013-01-23T18:10:38.820 回答
3

所以我的想法是在触发事件处理程序mouseup时将事件处理程序绑定到文档。mousedown然后你可以运行你想要运行的代码mouseup和click. 这是一个显示这一点的小提琴。

$(document).ready(function() {
    $('#myButton').mousedown(function() { 
        debug('button down'); 
        $(document).on('mouseup', function(){
            $(document).off('mouseup');
            debug('button up');
            debug('click'); 
        });
    });
});

function debug(msg) {
    $('#debug').append('[' + msg + ']');
}
于 2013-01-23T18:29:05.540 回答