Opacity transition for: freezes not working

Question

I want all elements that are links to display consistent behavior.

 a:hover { opacity: 0.5; }

This works in IE and Firefox, but the opacity (and the associated CSS transition) does not apply correctly to the children of the tag <a>in Chrome and Safari. If I add an explicit rule for <div>as a child, it will work in Chrome and Safari:

 a:hover, a:hover div { opacity: 0.5; }

So far, so good, and this was asked and answered before. The problem is that by adding a rule to the containing one <div>, opacity is applied twice in IE and Firefox, making the element too transparent.

I need to get around both scenarios - <a>wrapping <div>or not, without creating many explicit CSS rules. How can i do this?

http://liveweave.com/fMsz7m

Answer 1

What worked for me in Safari was adding display: blockto the tag

a:hover {                       
  opacity: 0.5;
  transition:  opacity 0.2s ease;
  display: block;
}

Answer 2

I'm not sure that it is considered a direct solution to your question (I'm not sure why the children are not inherited), but you can add display: blockin ato your css, which will work (tested with Firefox and Chrome).

JSFiddle DEMO

An alternative is to target your <div>parent <a>.

JSFiddle DEMO

It seems to me that there are better solutions / explanations, maybe this sparked an idea for someone else.