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

I have a jQuery popup in which I have a asp.net button and an asp.net option button. The popup is shown using a link button. When the user click on link button, the popup will be shown.

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

I have a css style property for the button. Below is the CSS code

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

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

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

When the popup is loaded initially, I am disabling the button using the below code.

最初加载弹出窗口时,我使用下面的代码禁用该按钮。

$("[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
        });

Once the option button is selected, I am enabling the button using the following code

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

$("[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);
        });

Everything is working fine but i am not able to apply the hover css for the button. i tried the below function but its enabling the button hover css but when the mouse has been moved it not changing the background color to initial state.

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

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

Can anyone please let me know where I am doing wrong?

任何人都可以让我知道我做错了什么?

1 个解决方案

#1

use classes instead of css and then add and remove the class as needed

使用类而不是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;
}

and then in your code

然后在你的代码中

//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');

#1