Make a whole div clickable with working :active css rule in IE10

Question

I\'m designing a clickable panel for an html app which contains multiple text elements and images.

From what I understand this is generally done with a div. Somethin

Answer 1

Why don't you use HTML <button> element. It's created for your case. Div doesn't take focus, while button gets.

Answer 2

Currently not possible (I think)

From what I can gather, this is currently not possible as the :active state of a child is not propagated up to the parent div. Both Internet Explorer 10 and Opera 11.64 failed to propagate the :active state up to the parent when testing with div elements.

Fiddle: http://jsfiddle.net/jonathansampson/UrN39/

Workaround

The only other solution that comes to mind would be to use event propagation in JavaScript. Fortunately the events of a mousedown will propagate up on the DOM, and onto the parent div. The following example utilizes jQuery:

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

Note here that I have modified the :active pseudo-class to be an actual class .active. This has been tested in IE10 and works. Given the approach, it should work without any problem in just about every major browser.

Fiddle: http://jsfiddle.net/jonathansampson/S9JrH/8/

Answer 3

You can use the CSS pointer-events: none; on a child element that you would like to disregard mouse events and it will bubble up appropriately to its parent.

Answer 4

I overlay the the element using :after so that children are not clickable.

.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);
}

I will be honest I have no idea if you can use *:pseudo-selector in IE but chrome you can so it's worth a shot.