Question

目前我们使用漂亮的平板ccs-only按钮显示按下效果。他们有一种奇怪的行为：

.button {
    cursor: pointer;
    display: inline-block;
    color: #FFF;
    font-weight: normal;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    background: #32a2f0;
    border: 0px;
    border-bottom: 2px solid #1e87cc;
    padding: 10px 30px;
}
.button:hover {
    background: #1e87cc !important;
    border-bottom: 2px solid #0169AD;
}
.button:active {
    border-bottom: 0px !important;
    border-top: 2px solid #0169AD;
    margin-top: 2px;
    padding-top: 10px;
    padding-bottom: 8px;
}

http://jsfiddle.net/6SeG8/

问题是：当点击顶部2到4像素的按钮时，点击事件不会触发。 css：active状态会触发，但按钮的动作不会触发。

Answer 1

这是因为您正在应用的边框和上边距。您应该改为使用透明边框，而不是指定border-top: 0px;等。然后，您可以为顶部边框提供额外的宽度以弥补边距：

.button {
    ...
    border-top: 2px solid transparent;
}

.button:active {
    ...
    border-bottom: 2px solid transparent;
    border-top: 4px solid #0169AD; /* Added 2px to this, instead of 2px margin */
}

JSFiddle demo

另外，您根本不需要使用!important。

Answer 2

.button:active {
    border-bottom: 0px !important;
    border-top: 2px solid #0169AD;
    //margin-top:2px;  //this is the problem
    padding-top: 10px;
    padding-bottom: 8px;
}

Updated Fiddle

.button:hover {
    background: #1e87cc !important;
    border-bottom: 2px solid #0169AD; // This may cause the onclick not to work when clicking form the bottom of the button
}

Answer 3

考虑使用after伪元素：

.button:active:after{
  content: " ";
  position: absolute;
  top: -4px;
  left: 0;
  width: 100%;
  height: 100%;
}

JSFiddle

请注意，它在IE7及更早版本中不起作用。

Answer 4

尝试按住按钮。

你可以看到按下按钮中间的然后按钮是深蓝色（真的按下了）。

如果您按<边框附近的，则该按钮无法获取“mouseup”以引发“click”事件。所以你的javascript永远不会收到点击事件并触发。

如果您希望相同的行为将边框边距更改为具有所需大小的透明边框。

Answer 5

你可以做的一件事是

<a href="#" onclick="alert('button is clicked')"><span class="button">Click me</span></a>

按钮无法点击

5 个答案: