Question

我有一个jQuery弹出窗口，其中有一个asp.net按钮和一个asp.net选项按钮。弹出窗口使用链接按钮显示。当用户单击链接按钮时，将显示弹出窗口。

我有一个按钮的css样式属性。以下是CSS代码

.btninfo {
    background-color: #00C0EF;
    border-color: #269abc;
    color: #fff;
}

    .btninfo:hover {
        color: #fff;
        background-color: #00ACD6;
        border-color: #269abc;
    }

最初加载弹出窗口时，我正在使用以下代码禁用该按钮。

$("[id*=lnkBtn]").live("click", function () {
            $("#ContentPlaceHolder1_btnDelete").show();
            $("#ContentPlaceHolder1_btnDelete").attr('disabled', 'disabled');
            $("#ContentPlaceHolder1_btnDelete").css("color", "#fff").css("background-color", "#C8CBCB").css("border-color", "#C8CBCB");
            a.parent().appendTo($("form:first"));
            return false
        });

选择选项按钮后，我将使用以下代码启用该按钮

$("[id*=opnSelect]").live("click", function () {
            $("#ContentPlaceHolder1_btnDelete").show();
            $("#ContentPlaceHolder1_btnDelete").css("color", "#fff").css("background-color", "#00C0EF").css("border-color", "#269abc");
           $("#ContentPlaceHolder1_btnDelete").addClass('.btninfo:hover');
            $("#ContentPlaceHolder1_btnDelete").prop('disabled', false);
        });

一切正常，但我无法将悬停css应用于按钮。我尝试了下面的功能，但它启用按钮悬停css但是当鼠标移动时它没有将背景颜色改变为初始状态。

$(function () { $("#ContentPlaceHolder1_btnDelete").mouseover(function () { $(this).css("background-color", "#00ACD6") }); });

任何人都可以告诉我我在哪里做错了吗？

Answer 1

使用类而不是css，然后根据需要添加和删除类

.btninfo {
background-color: #00C0EF;
border-color: #269abc;
color: #fff;
}

.btninfo:hover {
    color: #fff;
    background-color: #00ACD6;
    border-color: #269abc;
}

//new class with styles for disabled button
.btnDisabled{
    color: #fff;
    background-color: #C8CBCB;
    border-color: #C8CBCB;
}

然后在你的代码中

//when disable button add this class btnDisabled
   $("#ContentPlaceHolder1_btnDelete").addClass('btnDisabled').removeClass('btninfo');

//when enable  button add back the original class which inlcudes the `hover` styles
    $("#ContentPlaceHolder1_btnDelete").addClass('btninfo').removeClass('btnDisabled');

ASP.NET - 使用jQuery动态添加/删除按钮css

1 个答案: