Opacity transition for a:hover not working

Question

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

 a:hover { opacity: 0.5; }

This works in IE and Firefox, but the opacity (and associated CSS transition) is not properly applied to the child elements of the <a> tag in Chrome and Safari. If I add an explicit rule for a <div> as a child element, it works in Chrome and Safari:

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

So far so good, and this has been asked and answered before. The problem that I have is that by adding the rule for the containing <div>, the opacity gets applied twice in IE and Firefox, making the element too transparent.

I need to cover both scenarios - <a> wrapping a <div> or not, without writing lots of explicit CSS rules. How can I do that?

http://liveweave.com/fMsz7m

Answer 1

What worked for me in Safari was adding display: block into the a tag

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