2

在触摸屏设备上，如何在按下 HTML 按钮后将其返回到非活动状态？悬停和活动伪选择器当前的样式相同：

button.largeButton {
    font-size:15px;
    padding:0 18px;
    height:36px;
    background:#fff;
    border:none;
    border:2px solid #1a1a1a;
    box-shadow:0 0 6px rgba(0,0,0,0.18), inset 0 0 6px rgba(0,0,0,0.18);
    letter-spacing:1px;
    color:#1a1a1a;
    border-radius:1px;
    -webkit-transition: all 0.09s ease-out;
       -moz-transition: all 0.09s ease-out;
         -o-transition: all 0.09s ease-out;
            transition: all 0.09s ease-out;
}

button.largeButton:hover,
button.largeButton:active {
    background:#1a1a1a;
    color:#fff;
    box-shadow: inset 0 0 9px rgba(255,255,255,0.18);
    -webkit-transition: all 0.09s ease-out;
       -moz-transition: all 0.09s ease-out;
         -o-transition: all 0.09s ease-out;
            transition: all 0.09s ease-out;
    border-color:#333;
}

仅 CSS 的解决方案更可取，但 JS/jQuery 很好。

4

2 回答 2

1

jsFiddle Demo

也许你应该通过将你的类名分离为活动/悬停来尝试这个

button.largeButton:hover,
button.largeButton:active {...}

可能成为

button.activeButton:hover,
button.activeButton:active {...}

然后一旦单击按钮，该类将被删除。

示例 html

<button class="activeButton largeButton">

jquery删除类

$(".activeButton").click(function(){$(this).removeClass("activeButton");});

不幸的是，没有纯粹的 css 方法可以做到这一点。然而，最好的方法是使用:visited，这是不可能的，因为

注意：出于隐私原因，浏览器严格限制您可以使用此伪类选择的元素应用的样式：仅颜色、背景颜色、边框颜色、边框底部颜色、边框左颜色、边框右-color、border-top-color、outline-color、column-rule-color、填充和描边。另请注意，alpha 分量将被忽略：将使用未访问规则的 alpha 组件（除非不透明度为 0，在这种情况下，整个颜色将被忽略，并使用未访问规则之一.- MDN：访问过
于 2013-06-11T00:25:36.887 回答
-1

不幸的是，我不知道能够在点击后返回非活动状态。不过，在 jQuery 中执行此操作的方法非常简单。

$('.largeButton').click(function() { $(this).blur(); });
于 2013-06-11T01:33:36.310 回答