Párrafos con efecto hover

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.

• Sed sagittis arcuMorbi consectetur orci at nibh viverra eget bibendum risus dictum. Nulla consequat quam arcu. Nullam euismod pharetra diam et ultricies? Aenean convallis scelerisque velit, et vehicula turpis consectetur et.

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>

• Condimentum quam elementumCurabitur venenatis, nisl at scelerisque aliquet, ipsum quam rutrum enim; ac euismod tortor arcu quis orci. Nunc vitae augue augue. Integer nec orci ut neque sagittis laoreet. Sed id ante sit amet neque aliquet volutpat.
• Eget cursus tortor posuereVivamus suscipit nisi sed libero accumsan et dictum sem pretium. Aliquam quis lectus eget lorem fermentum fermentum. Integer convallis; libero et feugiat venenatis; ligula dolor mollis urna, et lacinia tortor mauris quis erat.

REFERENCIAS:impressivewebs.com