在手机上激活按钮？

Question

当用户点击按钮时...

#featured-challenge-button {
  background-color: #446CB3;
  box-shadow: 3px 3px 5px black;
  &:hover {
    background-color: #ccac00;
    box-shadow: none; 
  }
  &:active {
    background-color: #ccac00;
    box-shadow: none; 
  }
  &:focus {
    background-color: #ccac00;
    box-shadow: none; 
  }
}

按钮示例：

# link_to
<%= link_to next_challenge_path, class: "btn", id: "featured-challenge-button" do %>
  <span class="glyphicon glyphicon-plus"></span>
<% end %>

# submit
<%= button_tag(type: 'submit', class: "btn", id: "featured-challenge-button")  do %>
  Save
<% end %>

如何证明它是立即按下的？

在浏览器上它可以工作，但在我的 iPhone 上，点击按钮后没有效果。点击按钮的唯一指示是屏幕顶部的加载栏。

我使用:active 是错误的还是有其他CSS 技术或有javascript 解决方案？

Answer 1

您需要在按钮上使用ontouchstart 事件。只需使用

ontouchstart="" 在您的元素上，:active 将起作用。

<button ontouchstart="">An Example</button>