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

概述我正在为包含多个文本元素和图像的html应用程序设计一个可点击的面板. 从我所了解的这一般通过一个div来完成.这样的事情 <div class="myButton"> <h2>Text</h2> <h3>Some more text</h3> <img ...></div> 有一点造型和挂钩点击事件这工作正常,但我有问题的样式的活动状态： .myButton { 我正在为包含多个文本元素和图像的HTML应用程序设计一个可点击的面板.

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

<div >    <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/

总结

以上是内存溢出为你收集整理的html – 使整个div可以工作：IE10中的活动CSS规则全部内容，希望文章能够帮你解决html – 使整个div可以工作：IE10中的活动CSS规则所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。