Como criar um bloco hover efeito, para uma lista de links |

Como criar um bloco hover efeito, para uma lista de links

Este tutorial explica como criar um bloco hover efeito, para uma lista de links usando uma forma limpa CSS design com apenas li, calibração e em tags.

Etapa: 1 Estrutura básica HTML


  > <div id = "linkBox"> 
  <ul> 
  > Link Heading One <li> <a href = "#"> Link Uma rubrica 
  <em> lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui nec risus.  Em uma eu neque tortor lacinia rhoncus. </ Em> 
  <span> 20 jun 2009 </ span> </ a> </ td>  
 
  > Link Heading Two <li> <a href = "#"> Link Categoria Dois 
  <em> lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui nec risus.  Em uma eu neque tortor lacinia rhoncus. </ Em> 
  <span> 21 jun. 2009 </ span> </ a> </ td>  
 
  > Link Heading Three <li> <a href = "#"> Link Categoria III 
  <em> lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Ut viverra dui nec risus.  Em uma eu neque tortor lacinia rhoncus. </ Em> 
  <span> 22 jun 2009 </ span> </ a> </ td>  
  </ ul> 
  </ div>

Etapa: 1 Código CSS


  # linkBox ul ( 
  ; list-style-type: none; 
  ; width: 400px; 
  )  

  # 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% "Geórgia", Times New Roman, Times, Serif; 
  ; padding: 5px; 
  ; text-decoration: none; 
  %; Line-height: 182. 5%; 
 
  ) 

  /* make hover effect work in IE */ * Html # linkBox li a (/ * fazer pairar efeito trabalhos no IE * / 
  ; width: 400px; 
  ) 

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

  # um linkBox in (  
  ; color: # 333; 
  ; display: block; 
  82 . 5 % "Georgia" , Times New Roman, Times, serif ; font: normal 82. 5% "Geórgia", Times New Roman, Times, Serif; 
  . 5 %; line-height: 182. 5%;  
  ) 

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

O Exemplo

Finalmente estamos a fazer. criámos um bloco hover efeito, para uma lista de links. Ver o meu exemplo e rolar sobre a lista itens para ver o bloco hover efeito em ação.

Compartilhe & Support: