Denne veiledningen forklarer hvordan du oppretter en blokk hover effekt for en liste over koblinger form ved hjelp av en ren CSS design med bare li, span og em koder.

Trinn: 1 Basic HTML Organisering

  > <div id = "linkBox"> 
  <ul> 
  > Link Heading One <li> <a href = "#"> Link Rubrikk One 
  <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>  
 
  > Link Heading Two <li> <a href = "#"> Link Rubrikk To 
  <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>  
 
  > Link Heading Three <li> <a href = "#"> Link Rubrikk Tre 
  <em> Lorem Ipsum dolor sit amet, consectetur adipiscing Elit. 
  Ut viverra dui NEC risus.  I EU neque en tortor lacinia rhoncus. </ Em> 
  <span> 22 juni 2009 </ span> </ a> </ li>  
  </ ul> 
  </ div> 

Trinn: 1 CSS kode

  # linkBox ul ( 
  ; list-style-type: none; 
  ; Bredde: 400 piksler; 
  )  

  # linkBox li ( 
  0 ; margin: 5px 0; 
  #ccc ; Border-bottom: 1px dotted # CCC; 
  #ccc ; Border-top: 1px dotted # CCC; 
  ) 

  # linkBox li a (  
  ; color: # E67701; 
  ; display: block; 
  100 . 1 % "Georgia" , Times New Roman, Times, serif ; font: bold 100. 1% "Georgia", Times New Roman, Times, serif; 
  ; padding: 5px; 
  ; text-decoration: none; 
  %; Line-height: 182. 5%; 
 
  ) 

  /* make hover effect work in IE */ * Html # linkBox li a (/ * foreta hover effekt arbeid i IE * / 
  ; Bredde: 400 piksler; 
  ) 

  { # linkBox li a: hover ( 
  ; background: # eeeeee; 
  ) 

  # linkBox en em (  
  ; color: # 333; 
  ; display: block; 
  82 . 5 % "Georgia" , Times New Roman, Times, serif ; font: normal 82. 5% "Georgia", Times New Roman, Times, serif; 
  . 5 %; line-height: 182. 5%;  
  ) 

  # linkBox en span ( 
  ; color: # 006AFF; 
  82 . 5 % "Georgia" , Times New Roman, Times, serif ; font: normal 82. 5% "Georgia", Times New Roman, Times, serif; 
  % ; line-height: 150%; 
  ) 

The Example

Endelig er vi ferdig. vi laget en blokk hover effekt for en liste over koblinger. Se mitt eksempel og rulle over listen eks å se blokkere hover effekt i aksjon.

Arkivert under: Css, opplæring av admin