Question

每个函数都有更多的代码，但这些是关于我的问题的主要问题我认为......这是来自一个人工作库，基本上对翻转图像进行去饱和处理。

如何在点击时将其更改为鼠标悬停/翻转？这是他的代码......

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。下面是我放入的切换代码，而不是上面的两个，只是来了。

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

所以我的问题是怎么做oncick？

我试过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;
    }
  }

Answer 1

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

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

切换图像上的去饱和度onClick in css / javascript

1 个答案: