Question

jQuery.BlackAndWhite创建一个SVG并在悬停时对其进行去饱和。当我悬停图像时，插件工作正常。但我在容器内有图像。我需要延长＆＃34;热区＆＃34;悬停到整个div而不是只有图像。我不确定这个插件是否可行。

HTML

<div class="item">
    <div class="bw">
        <img src="myimage.jpg"/>
    </div>
    <p>some text</p>
</div>

JS

$('.item').hover(function(){

  $(this).find('.bw').BlackAndWhite({
      hoverEffect : true, // default true
      webworkerPath : false,
      invertHoverEffect: true,
      intensity:1,
      speed: { 
          fadeIn: 200, // 200ms for fadeIn animations
          fadeOut: 300 // 800ms for fadeOut animations
      },
      onImageReady:function(img) {
      }
  });

});

我会创建一个JSFiddle，但这个插件需要一个本地图像才能工作。

Answer 1

在插件中，查找这些行...

    // binding the hover effect
    if (hoverEffect) {

        $container.on('mouseleave', _onMouseLeave);
        $container.on('mouseenter', _onMouseEnter);
    }

您需要更改它，以便它定位到指定容器的父级，在您的情况下，它只有一个子级别，所以您可以修改上面的目标，如此

    // binding the hover effect
    if (hoverEffect) {

        $container.parent().on('mouseleave', _onMouseLeave);
        $container.parent().on('mouseenter', _onMouseEnter);
    }

在悬停时运行jQuery.BlackAndWhite

1 个答案: