Question

我正在设计一个包含多个文本元素和图像的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中正常运行？

Answer 1

目前不可能（我认为）

从我可以收集的内容来看，目前这是不可能的，因为孩子的:active状态不会传播到父div。在使用:active元素进行测试时，Internet Explorer 10和Opera 11.64都无法将div状态传播到父级。

小提琴：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/

Answer 2

为什么不使用HTML <button>元素。它是为您的案例而创建的。按钮获取后，Div不会聚焦。

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这样做值得一试。

使用IE10中的工作：活动css规则使整个div可单击

5 个答案:

目前不可能（我认为）

解决方法