jquery css change удаляет некоторые правила файла css

Question

Я заметил, что если я изменил css элемента с помощью jquery, он удалит некоторые правила CSS, уже указанные для элемента.

Например,

.className, .className2, etc... { 
    background-color: black; 
    color : silver; 
} 

.className:hover, .className2:hover, etc... { 
    background-color: gray; 
    color : white; 
} 

Теперь, если пользователь щелкает этот элемент, я хочу, чтобы навсегда изменить цвет фона, чтобы показать, что была нажата, и если другой родственный элемент был щелчок, он потеряет его JQuery набора правил CSS и вернуться к первоначальному CSS заданных правил (иначе он потеряет свою Rgba фон, и «наведения» правила будут добавлены назад)

highlightClicked : function (el) { 
     el.css({ 
      "background-color" : "rgba(70, 70, 70, 0.7)", 
      "color" : "white" 
      }); 
     $('#parentElement > span').each(function() { 
      $($(this)).not(el).css({ 
       "background-color" : "rgba(70, 70, 70, 0.0)", 
       "color" : "gray" 
      }); 
     }); 
    }, 

Но JQuery .css кажется чтобы удалить эти исходные правила.

Как их можно сохранить?

Answer 1

Вместо того, чтобы использовать .css(), чтобы изменить элементы стилей, более эффективный способ сделать это, чтобы добавить/удалить класс:

HTML

//add a universal class to target with jquery, my example is .target 
<div class="target className">className</div> 
<div class="target className2">className2</div> 

CSS

.active, .active:hover{ //don't add .active:hover if you want an actual hover state 
    background-color:red; //Whatever style you want 
    color: #FFF; //Whatever style you want 
} 

JQUERY

$(".target").click(function(){ 
    $(this).addClass("active").siblings(".target").removeClass("active"); //will add the class to the clicked element and remove it from anyothers 
}); 

EXAMPLE 1

ИЛИ, если вы хотите изменить классы для отдельного элемента, вы могли бы просто использовать .toggleClass() так:

$(".target").click(function(){ 
    $(this).toggleClass("active"); 
}); 

EXAMPLE 2

Answer 2

@ ответ jmore009, вероятно, является лучшим подходом , но чтобы ответить на ваш вопрос: jQuery просто переопределяет правила таблицы стилей, как отметил @webeno. Вы можете восстановить их, устанавливая свойства CSS в пустую строку:

el.css({ 
     "background-color" : "", 
     "color" : "" 
     }); 

Пример: http://jsfiddle.net/1ec10ncn/2/