1

我有以下CSS：

a.button:hover,
.mini-menu > li > a:hover {
    xxx
    }

有没有一种方法可以使这种悬停效果仅在按钮没有“禁用”类的情况下才对按钮起作用？

4

6 回答 6

1

您可以使用否定伪类：:not(selector)

a:not(.disabled).button:hover,
.mini-menu > li > a:not(.disabled):hover { ... }

（需要支持的浏览器。）

于 2012-10-02T10:53:50.190 回答
1

您可以使用 CSS3:not()选择器，但当然这具有跨浏览器兼容性实现：

a.button:not(.disabled):hover,
.mini-menu > li > a:hover {
    xxx
}
于 2012-10-02T10:54:22.517 回答
1

你可以通过 :not(.disabled)选择器来完成。

为所有没有.disabled类的元素设置 css

:not(selector)选择器匹配不是指定元素/选择器的每个元素。

在此处输入图像描述

注意：IE8 及更早版本不支持

于 2012-10-02T10:55:16.757 回答
1

除了:not这里建议的选择器之外，您还可以简单地为a.buttonwithdisabled类覆盖悬停类（如果您支持 IE7 和 8，可能会很有用）：

a.button:hover,
.mini-menu > li > a:hover {
    xxx
}

a.button.disabled:hover {
   //css to set non-hover style
}

简单的演示

于 2012-10-02T11:00:30.873 回答
0

你可以使用:not(.disabled)选择器。

于 2012-10-02T10:54:47.087 回答
0

此外:not()- 另一种方法是利用 CSS 特定性并使用更高得分的“禁用”类重置样式。

a.button.disabled:hover,
.disabled.mini-menu > li > a:hover {
   xxx- disabled properties that won't be over ridden by below.
}


a.button:hover,
.mini-menu > li > a:hover {
    xxx
}

工作演示 http://jsfiddle.net/bKyr3/

于 2012-10-02T11:07:07.823 回答