CSS Transition - Fade Element on Hover only

Question

Is it possible to have a css transition that fades an element in on hover but simply hides the element when the mouse leaves.

i.e. hover in = fade for 0.5 seconds | hover out = no fade and instant

Answer 1

Yes, you can achieve this using CSS3 transitions. Essentially, your CSS should look like this:

#myLink {
    opacity: 0;
}

#myLink:hover {
    opacity: 1;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

And here's a jsFiddle to demonstrate: Fiddle

Answer 2

Yes, just set the transition on the :hover rather than the link - http://jsfiddle.net/spacebeers/X4ZqE/

(in the Fiddle, the link is in the top left of the "result" box)

#main-menu li a {
    opacity: 0;
}

#main-menu li a:hover{
    opacity: 1;    
            transition: opacity 0.5s ease-in; /* vendorless fallback */
         -o-transition: opacity 0.5s ease-in; /* opera */
        -ms-transition: opacity 0.5s ease-in; /* IE 10 betas, not needed in final build. */
       -moz-transition: opacity  0.5s ease-in; /* Firefox */
    -webkit-transition: opacity 0.5s ease-in; /*safari and chrome */
}​