JMiur [E]

Esta es una forma sencilla de mostrar un fondo diferenciado en ciertos párrafos, cuando se coloca el cursor del ratón encima de ellos.


La idea básica es utilizar la posibilidad que nos dan los enlaces pero, en realidad, en cualquier navegador moderno, lo mismo puede lograrse sin recurrir a ellos ya que la mayoría de las etiquetas aceptan :hover.

Primero, las definiciones de estilo:
a.button:link, a.button:visited { /* cada párrafo es un enlace */
background: transparent url(URL_imagen) no-repeat 20px 40px;
display: block;
text-decoration: none;
margin: 20px auto;
padding: 10px 20px 10px 100px;
width: 500px;
}
a.button:hover { /* el enlace cambia de estado al poner el cursor encima */
background-color: #FFEBCD;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
span.title { /* el título del párrafo */
color: #F08;
display: block;
font-size: 18px;
}
span.text { /* el contenido del párrafo */
color: #999;
font-family: Arial;
font-size: 15px;
line-height: 1.5em;
}
ul.demohover { /* usaremos una lista para contener los enlaces */
list-style: none;
margin: 0;
overflow: hidden;
padding: 0;
}
Y lo aplicamos a una lista ordenada:
<ul class="demohover">
<li>
<a href="#" class="button" onclick="return false;">
<span class="title"> ... el título ... </span>
<span class="text"> ... el contenido ... </span>
</a>
</li>
.......
</ul>

REFERENCIAS:impressivewebs.com

5 comentarios:

Unknown  

Un encanto :P

Responder
Gem@  

Pues ya te lo dije todo jajajaja aún dura la gracia qué cosas más curiosas pasan oye :)

Responder
La hormiguita  

Que bueno!!! a ver donde lo pongo...?
gracias. :P

Responder
JMiur  

Es fácil de hacer y es un efecto que se ve mucho útlimamente.

Responder
Michael Graber  

Te amo!:)
Te Amo!:D
Te Amo!:P
Soy Tica Jmiur!

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