javascript - 在 JQuery/Javascript 中运行 CSS

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