1

使用 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/ 如果您选择回答，请随时更新小提琴，以便我们可以有一个工作示例。

4

1 回答 1

1

您在小提琴中完成的方式是最佳实践。悬停仅适用于锚元素的某些 IE 版本，因此您所做的方式应该适用于所有现代浏览器。

于 2012-08-10T12:40:23.590 回答