Alte variante ale efectului :hover

In dabblet.com se gasesc multe exemple interesante folosind efectul hover pe link-uri text, cele mai multe dintre ele sunt comune.

Printre acestea, sunt două pe care le-am găsit interesant. Primul este de a adăuga o culoare de fundal colorat unui link text, vezi mai jos:

Primul un link colorat

codul CSS pentru acest efect de adauga inainte de linia </head>

<style>
a.colorido:hover {
color: #FFF;
padding=0 5px;
background-image: -moz-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -webkit-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -ms-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
background-image: -o-linear-gradient(left, #EA8711, #D96363, #73A6DF, #9085FB, #52CA79);
}
</style>

salveaza modificarile, intr-o postare noua sau unde doresti sa experimentezi noul tau link,adaugi:

<a class="colorido" href="#">un link colorat</a>

Al doilea exemplu: în loc de afişare a conţinutului de la atributul href, am putea arăta orice altceva (titlu, REL, etc) si CSS, si care transforma textul link într-un fel Tooltip rapid, vezi mai jos:

acest link afiseaza orice alt text aditional

cod CSS:

<style>
a.informacion {position: relative;}
a.informacion:hover:after {
background-color: CornflowerBlue;
border-radius: 5px;
color: #FFF;
content: attr(rel);
font-size: 12px;
left: 2em;
padding: 2px 10px;
position: absolute;
top: -1.5em;
white-space: pre;
}
</style>

si link-ul:

<a class="informacion" href="#" rel="exemplu informatii detaliate">acest link</a>afiseaza orice alt text aditional