Machen Sie mit working: active css rule in IE10 ein ganzes Div anklickbar
Ich entwerfe ein anklickbares Bedienfeld für eine HTML-App, die mehrere Textelemente und Bilder enthält.
Soweit ich weiß, wird dies im Allgemeinen mit einem div durchgeführt. Etwas wie das:
<div class="myButton">
<h2>Text</h2>
<h3>Some more text</h3>
<img ...>
</div>
Mit ein bisschen Styling und dem Anschließen des Click-Ereignisses funktioniert dies einwandfrei, aber ich habe Probleme mit dem Styling des aktiven Zustands:
.myButton {
cursor:pointer;
}
.myButton:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}
In diesem Beispiel versuche ich eine CSS-Animation (nur IE), aber das könnte wirklich alles sein. Das Problem ist, dass der aktive Status nur funktioniert, wenn ich auf das Div klicke, aber nicht, wenn ich auf eines der untergeordneten Elemente des Div klicke.
Hier ist eine JS-Geige, um das Szenario zu zeigen:
AKTUALISIEREN: Vielen Dank an David Thomas, der auf einen Tippfehler im Code hingewiesen und bestätigt hat, dass dies in Chrome funktioniert.
Leider funktioniert dies in IE10 nur, wenn Sie auf den unteren Teil des Divs außerhalb des Texts klicken.
Weiß jemand, wie man das in IE10 richtig zum Laufen bringt?