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

Solution 1

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/

Solution 2

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

Solution 3

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

Solution 4

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.

View more solutions

Comments

[Patrick Klug]

can you nest other content inside the button?

[Patrick Klug]

yes, you can use *: but then of course the active animation will only apply to the element which is clicked, not the whole div container

[Saeed Neamati]

Yeah, of course. <button> is just like <input type='submit' /> and submits the form on click automatically, but also let's you embed other HTML markup inside it. However, while you can embed <div> and <p> and elements like (block-level elements) in a <button>, you shouldn't. Only use inline-level elements like <a> and <span>.

[Patrick Klug]

I really want to use more complex elements in this particular 'button'

[BoltClock]

.myButton *:active is identical to .myButton :active.

[uınbɐɥs]

See Heading elements and Content categories. It looks like almost anything can go inside a <button>...

[Patrick Klug]

I would suggest also adding 'mouseleave' to the list of events we listen to, otherwise the active state remains if you move the mouse out of the element while holding the mouse button down.

[JamesBarnett]

The IE dev team has classified this issue as "won't fix". connect.microsoft.com/IE/feedback/details/757765/…

[wukong]

I can confirm that <button> is working on IE 10.This solution is very nice, Thank you.