JSFiddle - React, Tailwind, and code Playground

Positive hovers

by Jennifer Perrin

HTML

<!-- Gets DARKER on hover -->
<h1><a href="#">Positive hovers</a></h1>

<p>A positive hover is one whose appearance is added to on <code>:hover</code>, rather than subtracterd from. These are good :D</p>

<!-- ADDS underline on hover -->
<ul>
    <li><a href="#">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</a></li>
    <li><a href="#">Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.</a></li>
    <li><a href="#">Amet ultricies eget, tempor sit amet, ante.</a></li>
    <li><a href="#">Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</a></li>
    <li><a href="#">Vestibulum erat wisi, condimentum sed, commodo vitae.</a></li>
</ul>

<!-- ADDS background on hover -->
<p>Hi, I&rsquo;m Harry. I am a <a href="http://dribbble.com/csswizardry">designer</a> and <a href="https://github.com/csswizardry">developer</a>. I work for <a href="http://www.sky.com/">BSkyB</a> as a Senior UI Developer and I write at <a href="http://csswizardry.com">CSS Wizardry</a> which also has <a href="http://twitter.com/csswizardry">a Twitter feed</a>. I <a href="http://youtube.com/csswizardry">ride trials</a> and love to eat good food. Oh, I also made <a href="http://inuitcss.com">inuit.css</a>.</p>

CSS

html{
    font:0.75em/1.5 "Helvetica Neue", Arial;
}

a{
    text-decoration:none;
    color:#00e;
}
a:hover{
    text-decoration:underline;
}
h1 a{
    text-decoration:underline;
    opacity:0.25;
}
h1 a:hover{
    opacity:1;
}
p a:hover{
    text-decoration:none;
    color:#fff;
    background:#00e;
}