1

每个函数都有更多代码，但这些是我认为与我的问题有关的主要内容......这是来自一个家伙库，用于在翻转时对图像进行去饱和处理。

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

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;
    }
  }
4

1 回答 1

2

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

.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);
}
于 2012-09-04T12:04:05.833 回答