Сделайте весь div кликабельным при работе: действующее правило CSS в IE10
Я разрабатываю интерактивную панель для 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, чтобы показать сценарий:
UPDATE: Спасибо Дэвиду Томасу за то, что он указал на опечатку в коде и подтвердил, что это работает в Chrome.
К сожалению, в IE10 это работает только тогда, когда вы нажимаете на нижнюю часть div, вне текста.
Кто-нибудь знает, как заставить это работать должным образом в IE10?