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.

Filed under: Css, Tutorials by admin