3

我有css风格：

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

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

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

我怎样才能做到这一点？我应该将其设置style=""为其他内容吗？

先感谢您。

4

2 回答 2

2

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

#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”类的链接才会应用悬停效果。请注意，您需要在第一条规则（对于普通链接和）中指定所有color更改（等）的相关属性，以覆盖第二条规则的属性。text-decoration.noHover:hover

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

于 2013-06-05T12:12:57.093 回答
1

将另一个类应用于该项目，覆盖继承的悬停实现

像 CSS

a.mylink:hover {
        margin: 0;
        //some other styles
}

html

 <a href="/" class="mylink">
于 2013-06-05T12:09:54.183 回答