• Article Written 
  • on 25.06.2009
  •  at 12:24 PM
  •  by admin

How to create a block hover effect for a list of links

This tutorial explains how to create a block hover effect for a list of links form using a clean CSS design with only li,span and em tags.

Step:1 Basic HTML Structure

[code lang="htmlstrict"]
 
[/code]

Step:1 CSS Code

[code lang="css"]
#linkBox ul {
        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%;
}
[/code]

The Example

Finally we are done. we created a block hover effect for a list of links. View my example and roll over the list items to see the block hover effect in action.

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: