Я разрабатываю интерактивную панель для html-приложения, которая содержит несколько текстовых элементов и изображений.

Из того, что я понимаю, это обычно делается с помощью div. Что-то вроде этого:

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

Приложив немного стиля и подключив событие click, это работает нормально, но у меня возникла проблема со стилизацией активного состояния:

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

В этом примере я пытаюсь сделать анимацию CSS (только для IE), но это может быть что угодно. Проблема состоит в том, что активное состояние работает только тогда, когда я щелкаю по элементу div, но не работает, когда я щелкаю по любому из дочерних элементов div.

Вот JS Fiddle, чтобы показать сценарий:

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

UPDATE: Спасибо Дэвиду Томасу за то, что он указал на опечатку в коде и подтвердил, что это работает в Chrome.

К сожалению, в IE10 это работает только тогда, когда вы нажимаете на нижнюю часть div, вне текста.

Кто-нибудь знает, как заставить это работать должным образом в IE10?