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
<div id="linkBox"> <ul> <li><a href="#">Link Heading One <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.</em> <span>20th june 2009</span></a></li> <li><a href="#">Link Heading Two <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.</em> <span>21th june 2009</span></a></li> <li><a href="#">Link Heading Three <em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut viverra dui nec risus. In eu neque a tortor lacinia rhoncus.</em> <span>22th june 2009</span></a></li> </ul> </div>
Step:1 CSS Code
#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%; }
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.
Related Articles:
if you enjoyed reading this article, please check out other related articles below:











Loading...










































Submit a Comment