html - 为什么我的 :active 选择器在缩放转换时会失去其点击事件状态？

Question

我为网站设计了一个按钮，并尝试添加transform: scale(0.95);点击事件（使用:activateCSS 选择器）。

a.btn, input[type="submit"].btn, label.btn, button.btn {
  text-transform: uppercase;
  border: solid 1px #282828;
  font-size: 11px;
  line-height: 17px;
}
a.btn:active, input[type="submit"].btn:active, label.btn:active, button.btn:active {
  transform: scale(0.95);
}

<input type="submit" value="Show more recipes" class="btn"/>

如果用户点击按钮的边框，:active状态缩小图标，光标不再覆盖按钮，可能不再触发点击事件。如果用户在scale(0.95)该区域内单击，则正常触发单击事件。

我正在尝试保留点击事件；我试图应用一个不可见的:before面板但没有成功，因为input[type='submit']不支持它，并希望有人已经解决了这个问题。

编辑 1 月 14 日：问题已被重写，现在使用input[type='submit']不能包含元素。

标签： htmlcss

Answer 1

您可以轻松解决此问题

使用按钮或锚点中的另一个元素制作内容（按钮外观），并将转换放在按钮内的新元素上。这样，当您单击按钮时，您会得到转换和 js 触发，因为实际按钮不会缩小

这是一个简单的例子

document.getElementById('moreRecipes').addEventListener('click', function() {
    alert("clicked");
});

button.btn span {

    text-transform: uppercase;
    border: solid 1px #282828;
    font-size: 11px;
    line-height: 17px;
    display: block;
}
button.btn:active span {
    transform: scale(.95);
}

<button id="moreRecipes" class="btn">
  <span>Show more recipes</span>
</button>