html - 禁用特定 html 元素的 css 样式

Question

我有 CSS 样式:

#topmenu a:hover {
        margin: 0;
        padding: 8px 20px 7px 12px;
        color: #FFFFFF;
        text-decoration: none;
        background-color: #48516D;
}

然后，我有一个带有一些 <a> 的 topmenu div里面。我想在其中一个元素上禁用悬停样式，例如在这个元素上:

<div id="topmenu">
    <a href="/"><img width="85" src="/bundles/merrinmain/images/design/homepage.png"></a>

我该怎么做？我应该设置 style="" 吗？到别的地方？

提前谢谢你。

Answer 1

您不能直接“重置”特定元素的样式，可以这么说，但是您可以给它一个样式与非悬停链接相同的类。

#topmenu a, /* apply to non-hovered links */
#topmenu a.noHover:hover { /* and apply to .noHover even when hovered */
        margin: 0;
        padding: 8px 20px 7px 12px;
        color: fuchsia; /* yay */
        text-decoration: none;
        background-color: #48516D;
}
#topmenu a:hover {
        margin: 0;
        padding: 8px 20px 7px 12px;
        color: #FFFFFF;
        text-decoration: underline;
        background-color: #48516D;
}

这样只有没有“noHover”类的链接才会应用悬停效果。请注意，您需要在第一条规则(对于普通链接和 .noHover) 以覆盖第二个 :hover 规则的属性。

演示在 http://jsfiddle.net/N8txa/