javascript - 无法摆脱对禁用按钮的悬停效果

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 和代码隐藏中都将其设置为禁用的原因是 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"]比选择器 .disabledButton 更具体, 通过 cascade规则。

解决方法是使后一个规则中的选择器更加具体，例如

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

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