Denne guide forklarer hvordan man opretter en blok hover effekt for en liste over links form ved hjælp af en ren CSS design med kun li, span og em-tags.

Trin: 1 Grundlæggende HTML Struktur

 > <ul> <li> <a href = "#" > Link Heading One <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit.          Ut viverra dui nec risus. <div id = "linkBox"> <ul> <li> <a href = "#"> Link Udgiftsområde En <em> lorem ipsum dolor sit amet, consectetur adipiscing Elit. Ut viverra dui ian risus.  href = "#" > Link Heading Two <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit.          Ut viverra dui nec risus. I eu neque en tortor lacinia rhoncus. </ Em> <span> 20. juni 2009 </ span> </ a> </ li> <li> <a href = "#"> Link Udgiftsområde To <em> lorem ipsum dolor sidde amet, consectetur adipiscing Elit. Ut viverra dui ian risus.  href = "#" > Link Heading Three <em> Lorem ipsum dolor sit amet, consectetur adipiscing elit.          Ut viverra dui nec risus. I eu neque en tortor lacinia rhoncus. </ Em> <span> 21 juni 2009 </ span> </ a> </ li> <li> <a href = "#"> Link Udgiftsområde Tre <em> lorem ipsum dolor sidde amet, consectetur adipiscing Elit. Ut viverra dui ian risus.  I eu neque en tortor lacinia rhoncus. </ Em> <span> 22 juni 2009 </ span> </ a> </ li> </ ul> </ div> 

Trin: 1 CSS koden

 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-style-type: none; width: 400px;) # linkBox li (margin: 5px 0; border-bottom: 1px stiplede # ccc; border-top: 1px stiplede # ccc;) # linkBox li a ( color: # E67701; sprogudgaven: blok; font: bold 100. 1% "Georgia", Times New Roman, Times, serif; padding: 5px; text-decoration: none; line-height: 182. 5%;) * html # linkBox li a (/ * gøre hover effekt arbejde i IE * / width: 400px;) # linkBox li a: hover (background: # eeeeee;) # linkBox en em (color: # 333; sprogudgaven: blok; font: normal 82. 5% "Georgia", Times New Roman, Times, serif; line-height: 182. 5%;) # linkBox en span (color: # 006AFF; font: normal 82. 5% "Georgia", Times New Roman , Times, serif; line-height: 150%;) 

Eksemplet

Endelig er vi færdig. Vi har oprettet en blok hover effekt for en liste af links. Se mit eksempel og ruller hen over listen poster for at se blokere hover effekt i aktion.

Filed under: Css, Tutorials af admin