Question

我有css风格：

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

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

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

http://jsfiddle.net/N8txa/

演示

Answer 2

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

喜欢css

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

html

 <a href="/" class="mylink">

禁用特定html项目上的css样式

2 个答案: