Question

我正在尝试创建一个按钮，这样当用户点击它时，它会在按住鼠标按钮时更改其样式。如果在移动浏览器中触摸它，我也希望它以类似的方式改变它的风格。对我来说看似显而易见的事情是使用CSS：active伪类，但这不起作用。我尝试过：专注，但它也没有用。我试过了：悬停，它似乎工作，但它把我的手指从按钮上移开后保持了风格。所有这些观察都在iPhone 4和Droid 2上进行。

有没有办法在移动浏览器（iPhone，iPad，Android，还有其他人）上复制效果？现在，我正在做这样的事情：

<style type="text/css">
    #testButton {
        background: #dddddd;
    }
    #testButton:active, #testButton.active {
        background: #aaaaaa;
    }
</style>

...

<button type="button" id="testButton">test</button>

...

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
    $("*").live("touchstart", function() {
      $(this).addClass("active");
    }).live("touchend", function() {
      $(this).removeClass("active");
    });
</script>

：active伪类适用于桌面浏览器，活动类适用于触摸浏览器。

我想知道是否有更简单的方法可以做到这一点，而不涉及Javascript。

Answer 1

W3C规范中没有:touch这样的内容，http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

我认为

:active应该有用。

:active / :hover伪类的顺序对于它正常运行非常重要。

以上是上述链接的引用

交互式用户代理有时会更改呈现以响应用户操作。 CSS为常见情况提供了三个伪类：

：hover伪类适用于用户指定元素的情况   （有一些指点设备），但确实如此   不要激活它。例如，一个视觉   用户代理可以应用此功能   伪类时的光标（鼠标   指针）悬停在生成的框上   由元素。用户代理没有   支持互动媒体不   必须支持这个伪类。   一些符合要求的用户代理支持   互动媒体可能无法   支持这个伪类（例如，笔）   设备）。

：在激活元素时应用active伪类   用户。例如，之间   用户按下鼠标的次数   按钮并释放它。

：当一个元素具有焦点时，应用focus伪类   （接受键盘事件或其他   文本输入的形式）。

Answer 2

由于移动设备不提供悬停反馈，因此我希望作为用户在点击链接时看到即时反馈。我注意到-webkit-tap-highlight-color响应最快（主观）。

将以下内容添加到您的身体中，您的链接将具有点击效果。

body {
    -webkit-tap-highlight-color: #ccc;
}

Answer 3

我在移动触摸屏按钮样式方面遇到麻烦。这将解决您的悬停/活动按钮问题。

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

：触摸CSS伪类或类似的东西？

3 个答案: