:touch CSS 伪类或类似的东西? [英] :touch CSS pseudo-class or something similar?

问题描述

我正在尝试制作一个按钮，这样当用户单击它时，它会在按住鼠标按钮的同时改变其样式.如果在移动浏览器中触摸它，我还希望它以类似的方式更改其样式.对我来说看似显而易见的事情是使用 CSS :active 伪类，但这不起作用.我试过:focus，但也没有用.我试过 :hover ，它似乎有效，但在我将手指从按钮上移开后它保持了样式.所有这些观察都是在 iPhone 4 和 Droid 2 上进行的.

I am trying to make a button, such that when the user clicks on it, it changes its style while the mouse button is being held down. I also want it to change its style in a similar way if it is touched in a mobile browser. The seemingly-obvious thing to me was to use the CSS :active pseudo-class, but that didn't work. I tried :focus, and it didn't work too. I tried :hover, and it seemed to work, but it kept the style after I took my finger off the button. All of these observations were on an iPhone 4 and a Droid 2.

有什么方法可以在移动浏览器(iPhone、iPad、Android 以及其他)上复制这种效果?现在，我正在做这样的事情:

Is there any way to replicate the effect on mobile browsers (iPhone, iPad, Android, and hopefully others)? For now, I am doing something like this:

<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 伪类用于桌面浏览器，而 active 类用于触摸浏览器.

The :active pseudo-class is for desktop browsers, and the active class is for touch browsers.

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

I am wondering if there is a simpler way to do it, without involving Javascript.

推荐答案

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

There is no such thing as :touch in the W3C specifications, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active 应该可以，我想.

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

Order on the :active/:hover pseudo class is important for it to function correctly.

这是上面链接的引用

交互式用户代理有时会根据用户操作更改呈现.CSS 为常见情况提供了三个伪类:

Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:

• :hover 伪类在用户指定元素时适用(带有一些指点设备)，但确实不激活它.例如，一个视觉用户代理可以应用这个伪类当光标(鼠标指针)悬停在生成的框上由元素.用户代理不支持互动媒体不必须支持这个伪类.一些符合要求的用户代理支持互动媒体可能无法支持这个伪类(例如，一支笔设备).
• :active 伪类在元素被激活时应用用户.例如，之间用户按下鼠标的次数按钮并松开.
• :focus 伪类在元素具有焦点时适用(接受键盘事件或其他文本输入的形式).

这篇关于:touch CSS 伪类或类似的东西?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！