I am currently working on designing a clickable panel for an html app that will include multiple text elements and images.
Based on my understanding, this is typically achieved using a div. An example of this would be:
<div class="myButton">
<h2>Text</h2>
<h3>Some more text</h3>
<img ...>
</div>
After adding some styling and setting up the click event, everything seems to be functioning well. However, I am encountering issues with styling the active state:
.myButton {
cursor:pointer;
}
.myButton:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}
In this instance, I am attempting to create a CSS animation (specifically for IE), but it could really be anything. The problem lies in the fact that the active state only triggers when clicking directly on the div, not on any of its child elements.
You can view a demonstration of this scenario on JS Fiddle:
UPDATE: A big thank you to David Thomas for spotting a typo in the code and confirming that it works in Chrome.
Unfortunately, with IE10, the active state only registers when clicking on the lower part of the div, away from the text.
If anyone has insights on how to resolve this issue and make it function properly in IE10, please share your knowledge.