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.

One thought on “How to create a block hover effect for a list of links

  1. Anchor1

    I have been browsing online greater than three hours lately, yet I by no means discovered any attention-grabbing article like yours. It’s pretty price sufficient for me. In my opinion, if all webmasters and bloggers made just right content as you probably did, the web shall be a lot more helpful than ever before.
    .-= Anchor1´s last 1 ..1 =-.

Leave a Reply

Your email address will not be published. Required fields are marked *