Question

What is the best practice to create block hover effects on links using CSS? Here is my example:

The HTML:

<div id="links">
    <ul>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
    </ul>
</div> 

The CSS:

#links ul {
        list-style-type: none;
        width: 400px;
}

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}

#links li a {
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
    width: 400px;
}

#links li a:hover {
        background: #ffffcc;
}

#links a em {
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%;
}

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

I have seen various techniques to accomplish this, although my lack of coding experience prevents me from understanding which one is good practice. Ideally one that requires less code with the same results.

Here is a fiddle: http://jsfiddle.net/RsDMk/
If you choose to answer, feel free to update the fiddle so that we can have a working example.

Answer 1

The way you’ve done it in the fiddle is the best practice. Hover only works in certain IE versions on anchor elements, so the way you’ve done it should work on all modern browsers.