0

<a>我刚刚在一个元素上发现了这个奇怪的问题。我想制作一个带有“下推”动画的纯 CSS 按钮。

或多或少是这样的：

.button:active {
position: relative;
top: 10px;
}

问题是，如果您在文本下方执行 mousedown 并在文本移动到指针下方时释放链接似乎不起作用（动画运行正确但 onclick 或 href 不起作用）。你可以在这个小提琴中看到“错误”或任何东西：

http://jsfiddle.net/H9RgD/

我已经尝试过不同的东西，比如使用填充来创建动画，但它仍然不起作用。我可以确认它不在 Chrome 22（截至今天的最新版本）中。为什么会这样？我怎样才能解决这个问题来为一个 CSS 按钮设置动画？

4

1 回答 1

0

无法回答“为什么”（我认为这可能是一个错误）。好像我记得以前在 Chrome 上遇到过类似的问题，并想出了一个与我在这里提供的类似的解决方法。不知何故，添加伪元素的“覆盖”会导致整体变得“可点击”。在你的情况下，我注意到如果我点击顶部div，它也没有注册，但是当我将top调整添加到:before状态:active时，这似乎也解决了。

这个小提琴似乎有一个可行的解决方案。HTML 与您的小提琴相同（除了我将内容添加到警报中）：

HTML

<div class="tabs-container">
<div onclick="alert('here')">Click below the text</div>
</div>​

CSS

.tabs-container div{
    display: inline-block;
    background: whitesmoke;    
    padding-bottom: 5px;
    font-size: 25px;
    border-bottom: 5px solid grey;
    position: relative;
}

.tabs-container div:active{
    top: 10px;
    border-bottom: 0;
}

.tabs-container div:before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.tabs-container div:active:before {
    top: -10px;
}

​</p>

于 2012-10-23T03:21:30.783 回答