cdonner cdonner - 5 months ago 26
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
<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

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;
}
Comments