使用CSS的按钮效果导致单击事件出现问题

所以，我尝试使用CSS为按钮添加3D效果。我给了它一个底部边框，在鼠标悬停/点击时，我改变了边框的大小，并使用相对定位将其向下推等量

这很有效，看起来也不错，但是如果我在按钮的上边缘附近单击，则不会触发单击事件-可能是因为按钮已移到指针的位置

有没有其他方法可以在不干扰点击事件的情况下实现这种效果（使用纯CSS，而不是附加标记）

例如：

var initialCount=0；
window.incrementCounter=函数（）{
document.getElementById（'counter'）。innerHTML='counter:'+++initialCount；
}

#计数器{
边缘底部：1米；
}
钮扣{
背景：#ccc；
边界：无；
边框底部：3倍实心#aaa；
字体大小：16px；
填充物：5px10px；
位置：相对位置；
}
按钮：悬停{
边框底宽：2px；
顶部：1px；
}
按钮：激活{
边框底宽：0；
顶部：3px；
}

计数器：0
增量

问题在于，您绑定到的

单击

事件只有在成功的

鼠标向下

和

鼠标按下

事件发生后才会触发。当

mouseup

事件发生时，目标不再是按钮（因为它已被移动）

最简单的解决方法是将

incrementCounter（）

函数绑定到

mousedown

事件，而不是

单击

，如下所示：

<button id="button" onmousedown="window.incrementCounter()">Increment</button>

#计数器{
边缘底部：1米；
}
钮扣{
背景：#ccc；
边界：无；
边框底部：3倍实心#aaa；
字体大小：16px；
填充物：5px10px；
位置：相对位置；
}
按钮：悬停{
边框底宽：2px；
顶部：1px；
}
按钮：激活{
边框底宽：0；
顶部：3px；
}

计数器：0
增量

另一种解决方案是使用边距而不是相对定位

var initialCount=0；
window.incrementCounter=函数（）{
document.getElementById（'counter'）。innerHTML='counter:'+++initialCount；
}

#计数器{
边缘底部：1米；
}
钮扣{
背景：#ccc；
边界：无；
边际上限：0；
边框底部：3倍实心#aaa；
字体大小：16px；
填充物：5px10px；
}
按钮：悬停{
边框底宽：2px；
页边顶部：1px；
}
按钮：激活{
边框底宽：0；
利润上限：3倍；
}

计数器：0
增量

您还可以在css中使用w3.css。css是一个非常简单的样式框架。使用

用于悬停效果。

鼠标按下事件很好地解决了我的问题，干杯！是的，这只是为了简化我的代码片段——在“真实”的应用程序中，事件处理程序是通过JS绑定的。一点问题都没有，我怀疑这可能是一个测试用例，但我还是想提一下！很高兴能帮忙。

<div class="w3-hover">  for hover effect.