使用 CSS 在链接上创建 block 悬停效果的最佳做法是什么?这是我的例子:
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%;
}
我已经看到了实现此目的的各种技术,尽管我缺乏编码经验使我无法理解哪一种是好的做法。理想情况下需要更少的代码并获得相同的结果。
这是一个 fiddle :http://jsfiddle.net/RsDMk/ 如果您选择回答,请随时更新 fiddle ,以便我们可以有一个工作示例。
最佳答案
您在 fiddle 中完成的方式是最佳实践。悬停仅适用于 anchor 元素上的某些 IE 版本,因此您完成它的方式应该适用于所有现代浏览器。
关于html - 使用 CSS 创建 block 悬停效果的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11901782/