wdfsdaht4ryrty

readme.txt

as seen on ttp://jsfiddle.net/4z6L80dm/

index.html

<div id="wrap">
    <header>
        <h1>Fade Effect on <a href="#">Link Hover</a>?</h1>
    </header>
    <section>
        <h2>CodeMyUI.com</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>

style.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 {
  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; }