使用CSS创建块悬停效果的最佳做法

Question

在使用CSS的链接上创建块悬停效果的最佳做法是什么？这是我的例子：

的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> 

的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%; 
} 

我所看到的各种技术来实现这一点，虽然我缺乏编码经验使我从认识哪一个是很好的做法。理想情况下，需要较少的代码和相同的结果。

这里是一个小提琴：http://jsfiddle.net/RsDMk/ 如果你选择回答，随时更新小提琴，以便我们可以有一个工作的例子。

Answer 1

您在小提琴中所做的方式是最佳做法。悬停只能在锚定元素的某些IE版本中工作，因此您所做的方式应该适用于所有现代浏览器。