html – 使整个div可以工作：IE10中的活动CSS规则

我正在为包含多个文本元素和图像的html应用程序设计一个可点击的面板.

从我所了解的这一般通过一个div来完成.这样的事情

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

有一点造型和挂钩点击事件这工作正常,但我有问题的样式的活动状态：

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

在这个例子中,我试图做一个css动画(仅IE),但这真的可以是任何事情.
问题是活动状态只有当我点击div但是当我点击div的任何一个孩子时不起作用.

这是一个JS小提琴来显示场景：

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

更新：感谢David Thomas在代码中指出了错字,并确认这在Chrome中有效.

不幸的是,在IE10中,只有当您点击div的下方,才能远离文本.

有谁知道如何使这个工作正常在IE10？

解决方法

目前不可能(我想)

从我可以收集到的,这是目前不可能的,因为：一个孩子的活动状态不会传播到父div.当使用div元素进行测试时,Internet Explorer 10和Opera 11.64都无法将：活动状态传播到父级.

小提琴：http://jsfiddle.net/jonathansampson/UrN39/

解决方法

想到的唯一其他解决方案是在JavaScript中使用事件传播.幸运的是,mousedown的事件将在DOM上传播,并传播到父div上.以下示例使用jQuery：

$(".myButton").on("mousedown mouseup mouseleave",function(e){
    $(this).toggleClass( "active",e.type === "mousedown" );
});

请注意,我修改了：active伪类成为一个实际的类.active.这已经在IE10测试和工作.考虑到这种方法,在每个主要浏览器上都应该没有任何问题.

小提琴：http://jsfiddle.net/jonathansampson/S9JrH/8/