JMiur [E]

En dabblet.com hay ejemplos con muchas de las posibles opciones que tiene el efecto hover sobre los enlaces de texto; la mayoría de ellas son comunes

Entre ellas, hay dos que me parecieron interesantes. La primera sólo es apta para espíritus alocados, se trata de agregar un color de fondo multicolor:
<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>

<a class="colorido" href="#">el enlace</a>
este es un un enlace muy colorido

La segunda, utliza los llamados selectores condicionales para mostrar la dirección URL del enlace cuando nos ponemos sobre él:
<style>
a.selector:hover:after {
  content: " [" attr(href) "] ";
  color: LightBlue;
  font-size: 11px;
}
</style>

<a class="selector" href="http://vagabundia.blogspot.com/">el enlace</a>
este otro muestra la URL de referencia

Y sobre esta última, podemos general variaciones; por ejemplo, en lugar de mostrar el contenido del atributo href, podríamos mostrar cualquier otro (title, rel, etc) y con CSS, transformar eso en alguna clase tooltip rápida:
<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>

<a class="informacion" href="#" rel="información detallada">el enlace</a>
y este enlace muestra cualquier otro texto adicional

16 comentarios:

Unknown  

Me gustan Jmiur, ese del espíritu alocado también :)

JMiur  

Alocado y colorido :-)

Responder
Beben Koben  

why not just use the title attribute of all?
hehehe...

JMiur  

you can use what you want, life is full of alternatives, there's no one way to do something

Responder
Rosendo Ramírez  

Woww el de informacion detallada me atrapo :D

JMiur  

Es una forma simple de colocar tooltips; no es mala idea en absoluto.

Responder
Unknown  

El de "información detallada" es muy útil, sobre todo porque puede ser cualquier atributo, ya sea uno establecido o uno inventado (como <a href="#" info="ejemplo"...) aunque éste último por obviedad no es HTML estandar :P

JMiur  

Los atributos no-estandarizados son absolutamente válidos así que no hay problema en usarlos.

Responder
Admin  

Holaa!! olle como lo pongo en un link ya visitado? pues q lo visiten y q salga ya lo viste o algo asi...

JMiur  

La pseudo-clase de una enlace visitado es:
a:visited { }

Admin  

Osea que deberia quedar:

a:visited.informacion {position: relative;}
a:visited.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;
}

JMiur  

Basta que coloques esa regla y pruebes. De eso se trata todo esto. Probar y ver que sale.

Responder
Moriort  

Muchas gracias voy a probar :D

Responder
DARHAKEXGE  

hola JMiur, me preguntaba como hacer que el tooltip aparesca a la derecha y no arriba

JMiur  

En el último demo, por ejemplo, cambiando los valores de left y top.

DARHAKEXGE  

Gracias, me sirvio mucho.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR