Fade Effect on Link Hover

http://stackoverflow.com/q/6008324/154877

by bizamajig

HTML

<div id="wrap">
    <header>
        <h1>Fade Effect on <a href="#">Link Hover</a>?</h1>
    </header>
    <section>
        <h2>Lorem ipsum dolor sit amet consectetur</h2>
        <p>Sed molestie tellus risus, <a href="#">varius tempor libero</a>. Ut volutpat magna id lorem aliquet nec volutpat libero vestibulum. Praesent gravida nunc vestibulum mauris aliquam vulputate. Sed quis feugiat nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; <a href="#">Donec luctus faucibus urna</a>.</p>
    </section>
    <footer>This is a code example for the Stack Overflow question <a href="http://stackoverflow.com/q/6008324/154877">Fade Effect on Link Hover?</a></footer>
</div>

CSS

body { color:#222; background:#fafafa; font:13px/1.4 'segoe ui', sans-serif; }
h1, h2 { margin:0 0 .5em; font:700 2em/1 'myriad pro', sans-serif; } h2 { color:#999; font-size:1.4em; }
p { margin:0 0 1em; } footer { color:#999; margin:3em 0 0; text-align:center; } footer a { color:#777; }
#wrap { margin:1em auto; padding:1.5em; background:#fff; width:500px; box-shadow:0 1em 2em rgba(0,0,0,.15); }

a {
text-decoration:none;
    color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:color .2s ease-out, background 2s ease-in;
  -ms-transition:color .2s ease-out, background 2s ease-in;
  -moz-transition:color .2s ease-out, background 2s ease-in;
  -webkit-transition:color .2s ease-out, background 2s ease-in;
  /* ...and now for the proper property */
  transition:color .2s ease-out, background 2s ease-in;
}
a:hover { color:red; background:yellow; }