html - 在手机上激活按钮？

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>