Question

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

这很有效，但看起来不错，但是如果我点击按钮的上边缘附近，则点击事件不会触发 - 可能是因为按钮已经移开了指针。

是否有其他方法可以实现此效果（使用纯CSS，而不是额外的标记）而不会干扰点击事件？

示例：

＆＃13;

var initialCount = 0;
window.incrementCounter = function () {
  document.getElementById('counter').innerHTML = 'Counter: ' + ++initialCount;
}

＆＃13;

#counter {
  margin-bottom: 1em;
}

button {
  background: #ccc;
  border: none;
  border-bottom: 3px solid #aaa;
  font-size: 16px;
  padding: 5px 10px;
  position: relative;
}

button:hover {
  border-bottom-width: 2px;
  top: 1px;
}

button:active {
  border-bottom-width: 0;
  top: 3px;
}

＆＃13;

<div id="counter">Counter: 0</div>
<button id="button" onClick="window.incrementCounter()">Increment</button>

＆＃13;

Answer 1

问题是，只有在click和mousedown事件成功发生后，才会触发您绑定的mouseup事件。当mouseup事件发生时，目标不再是按钮（因为它已被移动）。

最简单的解决方法是将incrementCounter()函数绑定到mousedown事件，而不是click，如下所示：

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

请参阅下面的代码段以获取有效的演示：

var initialCount = 0;
window.incrementCounter = function () {
  document.getElementById('counter').innerHTML = 'Counter: ' + ++initialCount;
}

#counter {
  margin-bottom: 1em;
}

button {
  background: #ccc;
  border: none;
  border-bottom: 3px solid #aaa;
  font-size: 16px;
  padding: 5px 10px;
  position: relative;
}

button:hover {
  border-bottom-width: 2px;
  top: 1px;
}

button:active {
  border-bottom-width: 0;
  top: 3px;
}

<div id="counter">Counter: 0</div>
<button id="button" onmousedown="window.incrementCounter()">Increment</button>

请注意，使用突兀的事件处理程序是非常糟糕的做法。你最好在DOM之外使用监听器（即直接在你的JS中）。

Answer 2

另一种解决方案是使用保证金而不是相对定位。

＆＃13;

var initialCount = 0;
window.incrementCounter = function () {
  document.getElementById('counter').innerHTML = 'Counter: ' + ++initialCount;
}

＆＃13;

#counter {
  margin-bottom: 1em;
}

button {
  background: #ccc;
  border: none;
  margin-top: 0;
  border-bottom: 3px solid #aaa;
  font-size: 16px;
  padding: 5px 10px;
}

button:hover {
  border-bottom-width: 2px;
  margin-top: 1px;
}

button:active {
  border-bottom-width: 0;
  margin-top: 3px;
}

＆＃13;

<div id="counter">Counter: 0</div>
<button id="button" onmousedown="window.incrementCounter()">Increment</button>

＆＃13;

Answer 3

你也可以在css中使用w3.css。 w3.css是非常简单的样式框架。使用

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

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

3 个答案: