html - seleccionar - selectores avanzados css

Haga un div todo clic con funcionamiento: regla css activa en IE10

Question

Estoy diseñando un panel seleccionable para una aplicación html que contiene múltiples elementos de texto e imágenes.

De lo que entiendo esto se hace generalmente con un div. Algo como esto:

<div class="myButton">
    <h2>Text</h2>
    <h3>Some more text</h3>
    <img ...>
</div>

Con un poco de estilo y conectando el evento click, esto funciona bien, pero tengo problemas con el estilo del estado activo:

.myButton {
    cursor:pointer;
}
    .myButton:active{
        -ms-transition-duration: 0.2s;
        -ms-transform: scale(0.95);
    }

En este ejemplo, estoy tratando de hacer una animación css (solo IE) pero esto podría ser cualquier cosa. El problema es que el estado activo solo funciona cuando hago clic en el div pero no funciona cuando hago clic en cualquiera de los hijos del div.

Aquí hay un JS Fiddle para mostrar el escenario:

http://jsfiddle.net/S9JrH/13/

ACTUALIZACIÓN: Gracias a David Thomas por señalar un error tipográfico en el código y confirmar que esto funciona en Chrome.

Desafortunadamente, en IE10 esto solo funciona cuando se hace clic en la parte inferior de la división, lejos del texto.

¿Alguien sabe cómo hacer que esto funcione correctamente en IE10?

Answer 1

Actualmente no es posible (creo)

De lo que puedo recopilar, esto no es posible actualmente ya que el estado :active de un niño no se propaga hasta el div padre. Tanto Internet Explorer 10 como Opera 11.64 no pudieron propagar el estado :active hasta el padre al probar con elementos div .

Fiddle: http://jsfiddle.net/jonathansampson/UrN39/

Solución

La única otra solución que viene a la mente sería utilizar la propagación de eventos en JavaScript. Afortunadamente, los eventos de un mousedown se propagarán en el DOM y en el div principal. El siguiente ejemplo utiliza jQuery:

$(".myButton").on("mousedown mouseup mouseleave", function(e){
    $(this).toggleClass( "active", e.type === "mousedown" );
});

Tenga en cuenta que he modificado la :active pseudo-clase :active para que sea una clase real .active . Esto ha sido probado en IE10 y funciona. Dado el enfoque, debería funcionar sin ningún problema en casi todos los navegadores principales.

Fiddle: http://jsfiddle.net/jonathansampson/S9JrH/8/

Answer 2

¿Por qué no usas el elemento <button> HTML? Está creado para su caso. Div no se enfoca, mientras que el botón se pone.

Answer 3

Puedes usar los pointer-events: none; CSS pointer-events: none; en un elemento secundario que le gustaría ignorar los eventos del mouse y se propagará adecuadamente a su padre.

Answer 4

Superpongo el elemento utilizando :after para que los niños no se puedan hacer clic.

.myButton:after {
    content: '''';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
} 

Answer 5

.myButton:active, .myButton *:active{
  -ms-transition-duration: 0.2s;
  -ms-transform: scale(0.95);
}

Seré honesto. No tengo idea si puedes usar *: pseudo-selector en IE pero puedes chrome así que vale la pena intentarlo.