2017

cu reduceri

Alte variante ale efectului :hover

EFECTUL HOVERIn 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

4 comentarios:

  1. Buna thamara, multumesc si eu pentru vizita.

    RăspundețiȘtergere
  2. Foarte frumos scriptul al doilea ms mult

    RăspundețiȘtergere
  3. Salut Anonim, afisarea unor link-uri cu informatie aditionala este la mare cautare, cu ajutorul acestui script totul este posibil in acest domeniu.

    RăspundețiȘtergere

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc