Запустите CSS внутри JQuery/Javascript

Question

У меня есть некоторые проблемы с моей страницей. У меня есть четыре разных изображения, которые сделаны с помощью CSS. Я создал файл .svg, чтобы сделать это возможным. Теперь то, что я хочу, - это когда пользователь нажимает на изображение, а фильтр оттенков серого будет отключен, показывая оригинальные цвета. Но css имеет только: active и: hover. Я хочу, чтобы во время клика. Вот мой код:

//CSS 
<style type="text/css"> 
#main, #beverage, #set, #appetizer { 
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ 
filter: gray; /* IE6-9 */ 
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ 
} 
#main { 
filter: none; 
-webkit-filter: grayscale(0); 
} 

//IMAGES 
<td> 
<img src="main.png" width="80" style="cursor:pointer" id="main"><br> 
<img src="beverage.png" width="80" style="cursor:pointer" id="beverage"><br> 
<img src="set.png" width="80" style="cursor:pointer" id="set"><br> 
<img src="set.png" width="80" style="cursor:pointer" id="appetizer"><br> 
</td> 

Answer 1

Вы можете просто настроить класс с полутонового фильтром и удалить его, когда изображение щелкнул

HTML

<img src="main.png" width="80" style="cursor:pointer" id="main" class="grayscale"><br> 
<img src="beverage.png" width="80" style="cursor:pointer" id="beverage" class="grayscale"><br> 
<img src="set.png" width="80" style="cursor:pointer" id="set" class="grayscale"><br> 
<img src="set.png" width="80" style="cursor:pointer" id="appetizer" class="grayscale"><br> 

CSS

.grayscale { 
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ 
} 

JQuery

$('.grayscale').click(function(){ 
    $(this).removeClass('grayscale'); 
}); 

Answer 2

$('#id').css('key' , 'value'); 

Answer 3

Override СМЧ в обработчик щелчка:

$("#main, #beverage, #set, #appetizer").click(function() { 
    $(this).css({ filter: "none", 
        "-webkit-filter": "grayscale(0)" 
       }); 
} 

Answer 4

$('img.#main, img#beverage, img#set, img#appetizer').click(function(){ 
    $(this).css({ 
     '-webkit-filter': '', 
     'filter': '' 
    }) 
}); 

Answer 5

keep z-index also with this class for more perfect work without any future errors: 

.grayscale { 
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ 
    z-index:100; 
} 
and then use click function : 

$('.grayscale').click(function(){ 
    $(this).removeClass('grayscale'); 
});