Haga un div todo clic con funcionamiento: regla css activa en IE10
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:
ACTUALIZAR: 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?