javascript - 在CSS/Javascript中在图片onClick上切换去饱和度

每个函数都有更多的代码，但是对于我相信的问题，这些是最重要的主线...这是从一个男生库中获得的，用于在翻转时基本降低图像的饱和度。

如何将其更改为单击，而不是鼠标悬停/鼠标悬停？这是他的代码...

jQuery(function($){
$cloned.closest(".DesaturateDiv").bind("mouseenter mouseleave",desevent);
}

  function desevent(event)
  {
    if (event.type == 'mouseenter')
         $(".des.color", this).fadeOut(275);

    if (event.type == 'mouseleave')
        $(".des.color", this).fadeIn(200);
  }

我已经尝试过将if语句更改为jquery切换，以及将顶行从.bind（“ mouseenter mouseleave”，desevent）...更改为.bind（“ toggle”，desevent），但它仍然无法正常工作。我的问题基本上是如何用mouseenter和mouseleave代替onClick，以便图像使onClick饱和，然后再次使onClick饱和。这是我输入的切换代码，而不是上面的两个if，以防万一。

$('.DesaturateDiv').toggle(function() {

$(".des.color", this).fadeOut(275);

}, function() {
$(".des.color", this).fadeIn(200);
});

另外，在相关说明中，您可以使用css3进行此操作吗？
这是使用css3使图像饱和的代码...

 img.desaturate{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
}

所以我的问题是怎么做？

我尝试了img.desaturate：active {}，但是没有用？

编辑：我尝试了这一点，并认为这是我需要的，但是我确定语法不正确，帮助吗？

 function desevent(event)
  {
    i = 0;

    if( i = 0 ){
    if (event.type == 'mousedown')
         $(".des.color", this).fadeOut(275);
         i = 1;
    }

    if( i = 1 ){
    if (event.type == 'mousedown')
        $(".des.color", this).fadeIn(200);
                     i = 0;
    }
  }

最佳答案

只需将特定的类添加到clicked元素即可。

.desaturate{
    transition-duration: 400ms; //and other prefixes
}
.desaturate.active{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
    filter: url(desaturate.svg#greyscale);
    filter: gray;
    -webkit-filter: grayscale(1);
}