Este tutorial explica cómo crear un bloque de efecto hover una lista de enlaces forma limpia utilizando un diseño con CSS sólo li, em span y etiquetas.

Paso: 1 Estructura básica de HTML

 > <ul> <li> <a href = "#" > Link Heading One <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit.          Ut viverra dui nec risus. <div "linkBox" id => <ul> <li> <a href = "#"> Enlace Una rúbrica <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra Ut dui nec risus.  href = "#" > Link Heading Two <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit.          Ut viverra dui nec risus. En un tortor eu neque lacinia rhoncus. </ Em> <span> 20 de junio 2009 </ span> </ a> </ li> <li> <a href = "#"> Enlace Denominación Dos <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra Ut dui nec risus.  href = "#" > Link Heading Three <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit.          Ut viverra dui nec risus. En un tortor eu neque lacinia rhoncus. </ Em> <span> 21 de junio 2009 </ span> </ a> </ li> <li> <a href = "#"> Enlace Denominación Tres <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Viverra Ut dui nec risus.  En un tortor eu neque lacinia rhoncus. </ Em> <span> 22 de junio 2009 </ span> </ a> </ li> </ ul> </ div> 

Paso: 1 Código CSS

 list-style-type : none ; width : 400px ; } #linkBox li { margin : 5px 0 ;         border-bottom : 1px dotted #ccc ;         border-top : 1px dotted #ccc ; } #linkBox li a { color : #E67701 ; display : block ; font : bold 100 . 1 % "Georgia" , Times New Roman, Times, serif ; padding : 5px ; text-decoration : none ;         line-height : 182 . 5 %; } * html #linkBox li a { /* make hover effect work in IE */ width : 400px ; } #linkBox li a :hover { background : #eeeeee ; } #linkBox a em { color : # 333 ; display : block ; font : normal 82 . 5 % "Georgia" , Times New Roman, Times, serif ; line-height : 182 . 5 %; } #linkBox a span { color : #006AFF ; font : normal 82 . 5 % "Georgia" , Times New Roman, Times, serif ; line-height : 150 % ; } # LinkBox ul (list-estilo-tipo: ninguno; ancho: 400 píxeles;) # LinkBox li (margin: 5px 0; frontera de fondo: # ccc 1px salpicado; frontera-superior: 1px # ccc salpicado;) # LinkBox una li ( color: # E67701; pantalla: bloque; fuente: negrita 100. 1% "Georgia", Times New Roman, Times, serif; padding: 5px; text-decoration: none; line-height: 182. 5%;) * html # LinkBox una li (/ * hover efecto hacer el trabajo en IE * / anchura: 400 píxeles;) # LinkBox li a: hover (BACKGROUND: # eeeeee;) # LinkBox una em (color: # 333; pantalla: bloque; fuente: normal 82. 5% "Georgia", Times New Roman, Times, serif; line-height: 182. 5%;) # LinkBox un span (color: # 006AFF; fuente: normal 82. 5% "Georgia", Times New Roman , Times, serif; line-height: 150%;) 

El Ejemplo

Finalmente, se hacen. hemos creado un bloque hover efecto para obtener una lista de enlaces. Ver mi ejemplo y renovar los elementos de la lista para ver el efecto de flotar en el bloque de la acción.

Filed under: Css, Tutoriales por admin