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

问题描述

我想要创建一个按钮，这样当用户点击它时，它会改变其样式，同时按住鼠标按钮。我也希望它改变它的风格，以类似的方式，如果它在移动浏览器中触摸。对我来说，看似明显的事情是使用CSS：active伪类，但是没有工作。我试过：焦点，它没有工作太。我试过：hover，它似乎工作，但它保持了风格，我把我的手指按下按钮。所有这些观察都在iPhone 4和Droid 2上。

有没有办法复制对移动浏览器的影响（iPhone，iPad，Android， ）？现在，我正在这样做：

 < style type =text / css> 
 #testButton {
 background：#dddddd; 
} 
 #testButton：active，＃testButton.active {
 background：#aaaaaa; 
} 
< / style> 
 
 ... 
 
< button type =buttonid =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）; 
} function（）{
 $（this）.removeClass（active）; 
}）; 
< / script> 
  

活动伪类用于桌面浏览器，活动类用于触摸浏览器。 / p>

我想知道是否有更简单的方法来实现它，而不涉及Javascript。

解决方案

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

$ b $

在上订购 ：active / ：hover 伪类对于正确运行非常重要。

以下是上述链接的报价

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

• ：hover伪类适用于用户指定元素
  （有一些指点设备），但
  不激活它。例如，当光标（鼠标
  指针）悬停在由元素生成的
  框上时，视觉
  用户代理可以应用此
  伪类。用户代理不是
  支持交互式媒体不
  必须支持这个伪类。
  一些支持
  交互式媒体的兼容用户代理可能无法支持
  支持这个伪类（例如，笔
  设备）。


• 当用户激活元素
  时，active伪类适用。例如，在
  之间，用户按鼠标
  按钮并释放它。


• ：焦点伪类适用于元素具有焦点
  （接受键盘事件或其他
  形式的文本输入）。

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.

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>

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

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

解决方案

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

:active should work, I would think.

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

Here is a quote from that above link

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

• The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device).
• The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
• The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input).

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