Image within a div element doesn't handle the CSS active pseudo class

I have 开发者_运维技巧an image, located within a div element, and this div element changes some of its style properties when the mouse passes over it, using the CSS :hover pseudo-class. This works fine in all browsers. But the div element also has another class, :active, which is supposed to change its background color when clicked.

Here is when things start to break. In IE9 (the version i have installed), when I click on the image, the background color of the div doesn't change. Only when I click elsewhere on the div, it works, the color changes. In Firefox, it doesn't matter where I click within the div element, the background color changes, even if I click on the image. This is how I want IE to behave too, so when the usem clicks on the div, no matter where inside it, the :active effect would be triggered.

Is there a workaround or something I can use to make it work for IE?

After a bit of toying around with the css on the jsFiddle, I didn't find any CSS way to solve this : IE just doesn't want to consider the img as a part of the div.

I'd suggest you to solve this in javascript. Using onMouseDown.

pseudo :

(div or img).onMouseDown(div.addClass:"active")
(div or img).onMouseUp(div.removeClass : "active").

I'd suggest using a js framework to make it easier. See jquery mouseup and mousedown.

There's a trickier work around to this issue.

You can put up another div on top of the image as an overlay and make that div to respond to clicks and mouse actions and using jQuery add effects to the div underneath the image