请用工作整体DIV可点击：在IE10活跃CSS规则(Make a whole div clickab

我设计了一个包含多个文本元素和图像的HTML应用程序的可点击面板。

据我了解，这通常用一个div来完成。 事情是这样的：

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

随着位的造型和挂钩click事件能正常工作，但我有造型活跃状态的问题：

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

在这个例子中，我试图做一个CSS动画（仅限IE），但这个真的可以是任何东西。 问题是，当我点击股利但是当我点击任何div的儿童不工作的活动状态才起作用。

下面是一个JS小提琴展现的场景：

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

更新：感谢大卫·托马斯指出代码中的一个错字，并确认这个作品在Chrome中。

不幸的是，在IE10当你点击的div的下部，从文离开这仅适用。

有谁知道如何正确地得到这个工作在IE10？

Answer 1:

目前不可能的（我认为）

据我所知，这是目前不可能的，因为:active一个孩子的状态不会传播到父div 。 双方的Internet Explorer 10和Opera 11.64未能传播:active与测试时的状态到父div元素。

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

解决方法

我想到的唯一的其他的解决办法是使用事件传播在JavaScript中。 幸运的是鼠标按下的事件将向上传播的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/

Answer 2:

你为什么不使用HTML <button>元素。 它为你的情况产生。 格不接受焦点，而按钮获取。

Answer 3:

您可以使用CSS pointer-events: none; 在你想忽略鼠标事件，它会冒泡适当其父子元素。

Answer 4:

我叠加使用元素:after让孩子们不能点击。

.myButton:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
} 

Answer 5:

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

我会说实话，我不知道，如果你可以使用*：伪选择在IE浏览器，但Chrome，只要所以这是值得一试。

文章来源: Make a whole div clickable with working :active css rule in IE10