paginas - que es html y javascript

: ¿toca pseudoclase de CSS o algo similar?

Question

Estoy intentando hacer un botón, de modo que cuando el usuario haga clic en él, cambie su estilo mientras se mantiene presionado el botón del mouse. También quiero que cambie su estilo de una manera similar si se toca en un navegador móvil. La cosa aparentemente obvia para mí era usar CSS: pseudoclase activa, pero eso no funcionó. Intenté: centrarme, y tampoco funcionó. Intenté: flotar, y pareció funcionar, pero mantuvo el estilo después de quitar el dedo del botón. Todas estas observaciones fueron en un iPhone 4 y un Droid 2.

¿Hay alguna forma de replicar el efecto en los navegadores móviles (iPhone, iPad, Android y, con suerte, otros)? Por ahora, estoy haciendo algo como esto:

<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>

La pseudoclase activa es para navegadores de escritorio y la clase activa para navegadores táctiles.

Me pregunto si hay una manera más simple de hacerlo, sin involucrar Javascript.

Answer 1

Debido a que el dispositivo móvil no brinda retroalimentación estacionario, quiero que, como usuario, vea los comentarios instantáneos cuando se toca un enlace. Noté que -webkit-tap-highlight-color es el más rápido para responder (subjetivo).

Agregue lo siguiente a su cuerpo y sus enlaces tendrán un efecto tap.

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

Answer 2

No hay tal cosa como :touch en las especificaciones W3C, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active debería funcionar, yo pensaría.

El orden en la :active / :hover es importante para que funcione correctamente.

Aquí hay una cita de ese enlace de arriba

Algunas veces, los agentes de usuario interactivos cambian la representación en respuesta a las acciones del usuario. CSS proporciona tres pseudo-clases para casos comunes:

• La pseudoclase de flotación se aplica cuando el usuario designa un elemento (con algún dispositivo señalador), pero no lo activa. Por ejemplo, un agente de usuario visual podría aplicar esta pseudo-clase cuando el cursor (puntero del mouse) se cierne sobre un cuadro generado por el elemento. Los agentes de usuario que no admiten medios interactivos no tienen que admitir esta pseudoclase. Es posible que algunos agentes de usuario conformes que admiten medios interactivos no puedan admitir esta pseudoclase (por ejemplo, un dispositivo de lápiz).
• La pseudoclase activa se aplica cuando el usuario está activando un elemento. Por ejemplo, entre las veces que el usuario presiona el botón del mouse y lo libera.
• La pseudo-clase de enfoque se aplica mientras que un elemento tiene el foco (acepta eventos de teclado u otras formas de ingreso de texto).