jQuery - Animating opacity in IE8

Question

On the site I'm currently working on I have an <ul> containing a load of <li>'s, which each contain <div>, <span>, <img> etc.

When I hover over one of the <li>'s, I'm using jQuery to animate the opacity of all the other <li>'s to 0.3 to draw attention to the focused <li>.

My problem is IE8 (and only IE8) is animating the <li>'s opacity, but none of the child elements within that <li>.

Anybody come across this issue before, or know of a fix?

Thanks!

EDIT:

Please see the following jsFiddle for an example - http://jsfiddle.net/BJ8gK/22/

Answer 1

I had a similar problem - in IE8 order to ensure child elements' opacity is also affected when changing the opacity of their parent element you have to apply the css rule

filter:inherit

to the child elements. Simple fix, but perhaps obscure