ASP.NET - добавить/удалить кнопку css динамически с помощью jQuery

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 для кнопки. Я попробовал функцию ниже, но ее включение кнопки hover 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');