19

我正在为一个包含多个文本元素和图像的 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 Fiddle：

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

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

不幸的是，在 IE10 中，这仅在您单击 div 的下部，远离文本时才有效。

有谁知道如何让它在 IE10 中正常工作？

4

5 回答 5

19

目前不可能（我认为）

据我所知，目前这是不可能的，因为:activechild 的状态没有传播到 parent div。使用元素进行测试时， Internet Explorer 10 和 Opera 11.64 都无法将:active状态传播到父级。div

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

解决方法

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

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

请注意，我已将:active伪类修改为实际类.active。这已经在 IE10 中进行了测试并且可以工作。鉴于这种方法，它应该在几乎所有主要浏览器中都可以正常工作。

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

于 2012-06-04T17:24:02.860 回答
7

为什么不使用 HTML<button>元素。它是为您的案例创建的。Div 没有获得焦点，而按钮获得。

于 2012-05-31T05:26:25.560 回答
1

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

于 2014-10-06T22:23:10.293 回答
1

我使用覆盖元素，:after以便子项不可点击。

.myButton:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
}
于 2015-05-08T21:03:58.887 回答
0 
.myButton:active, .myButton *:active{
  -ms-transition-duration: 0.2s;
  -ms-transform: scale(0.95);
}

老实说，我不知道你是否可以在 IE 中使用 *:pseudo-selector，但你可以使用 chrome，所以值得一试。

于 2012-05-31T05:20:00.833 回答