我正在为包含多个文本元素和图像的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小提琴来显示场景：
更新：感谢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测试和工作.考虑到这种方法,在每个主要浏览器上都应该没有任何问题.
