Projektuję klikalny panel dla aplikacji HTML, która zawiera wiele elementów tekstowych i obrazów.

Z tego, co rozumiem, zazwyczaj robi się to za pomocą div. Coś takiego:

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

Przy odrobinie stylizacji i podłączeniu zdarzenia click działa to dobrze, ale mam problem ze stylizacją stanu aktywnego:

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

W tym przykładzie próbuję wykonać animację css (tylko IE), ale to może być naprawdę wszystko. Problem polega na tym, że stan aktywny działa tylko wtedy, gdy klikam div, ale nie działa, gdy klikam którekolwiek z dzieci div.

Oto JS Fiddle, aby pokazać scenariusz:

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

AKTUALIZACJA: Podziękowania dla Davida Thomasa za wskazanie literówki w kodzie i potwierdzenie, że działa to w Chrome.

Niestety w IE10 działa to tylko wtedy, gdy klikniesz dolną część div, z dala od tekstu.

Czy ktoś wie, jak to zrobić poprawnie w IE10?