html - 阻止 anchor 元素上的悬停效果

Question

我想在我的菜单上添加 block 悬停效果。但是，我购买的模板有一个很大的样式表，看起来像是从达斯·维德 (Darth Vader) 的后端出来的 - 我的编码知识有限，这让这项任务变得困难。

这是我网站菜单部分的 fiddle (它也包含整个样式表):http://jsfiddle.net/VjhJ4/

悬停时，我想要 block 悬停效果，每个菜单链接都具有不同的 block 颜色，请参见此图片作为示例(请注意，当鼠标不在上面时，我希望 block 变小):http://i.imgur.com/1xbbl.png

我遇到了执行此操作的脚本。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 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%;
}

我读到悬停仅适用于 anchor 元素上的某些 IE 版本，因此我认为这种技术是最好的方法。

现在，如何将它添加到我自己的页面？随时更新 fiddle :http://jsfiddle.net/VjhJ4/如果您需要更多信息，请告诉我。

Answer 1

您需要在悬停时添加边框底部和背景颜色。

查看此演示 http://jsfiddle.net/enve/VjhJ4/7/