无法在禁用按钮上摆脱悬停效果

Question

我有一个禁用复选框的按钮。但是，无论我尝试什么，我都无法让光标停止指针并返回默认值。

（我的画笔指针很糟糕。我没有捕捉指针的截屏程序）

活跃时：

不活跃时：

以下是一些感兴趣的代码：

CSS

.disabledButton {
    color:GrayText;
    cursor:default;
}

ASP.NET标记

<asp:CheckBox ID="cbLimit" runat="server" OnCheckedChanged="cbLimit_Checked" AutoPostBack="true"/>
<asp:Button ID="btnAll" runat="server" Text="All" style="float:right;"/>

的jQuery

$("#<%=cbLimit.ClientID%>").change(function () {
    if ($(this).attr('checked')) {
        $("#<%=btnAll.ClientID%>").prop("disabled", false);
    }
    else {
        $("#<%=btnAll.ClientID%>").prop("disabled", true);
    }
});

C＃代码

protected void cbLimit_Checked(object sender, EventArgs arg)
{
    if ((sender as CheckBox).Checked)
    {
        btnAll.Enabled = true;
    }
    else
    {
        btnAll.Enabled = false;
    }
}

我在jQuery和codebehind中将其设置为禁用的原因是jQuery要快得多，但并没有真正禁用某些元素，只是改变了它们的风格。

我还尝试使用以下代码设置类：

btnAll.CssClass = "disabledButton";

没有成功。

我试图在按钮标签中直接设置类，如下所示：

<asp:Button ID="btnAll" runat="server" CssClass="disabledButton" Text="All" style="float:right;"/>

但仍然看起来像是图像nr 2.我怎么能摆脱该死的指针？

Answer 1

类型按钮的输入元素具有cursor: default作为浏览器默认值，因此为了使问题出现，必须有一些你的样式表可以更改它。确切地说，让我们假设它是

input[type="button"] {
  cursor: pointer;
}  

现在有<input type=button disabled ...>和

.disabledButton {
  cursor:default;
}

光标仍然是pointer，因为选择器input[type="button"]比cascade规则更适合选择器.disabledButton。

修复方法是使后一规则中的选择器更具体，例如

input[type="button"].disabledButton {
  cursor:default;
}

另一种选择是使用!important，但它应该仅作为最后的手段使用。另一个是pointer-events属性，适用于现代浏览器，但browser support仍然有限。

Answer 2

正如abhitalks建议的那样，我只需要将pointer-events:none;添加到css中。另一种可能性是在!important之后使用cursor:default。示例：http://jsfiddle.net/2bzQJ/