cdonner cdonner - 8 months ago 52
CSS Question

Opacity transition for a:hover not working

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
tag in Chrome and Safari. If I add an explicit rule for a
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
, the opacity gets applied twice in IE and Firefox, making the element too transparent.

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


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;