Make a whole div clickable with working :active cs

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. Something like this:

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

With a bit of styling and hooking up the click event this works fine but I am having problem with styling the active state:

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

In this example I'm trying to do a css animation (IE only) but this could really be anything. The problem is that the active state only works when I click on the div but doesn't work when I click on any of the children of the div.

Here is a JS Fiddle to show the scenario:

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

UPDATE: Thanks to David Thomas for pointing out a typo in the code and confirming that this works in Chrome.

Unfortunately, in IE10 this only works when you click on the lower part of the div, away from the text.

Does anyone know how to get this working properly in IE10?

Answer 1

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

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

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.