javascript - html, svg, css 如何使鼠标事件不触发透明颜色

Question

是否可以使鼠标事件不在图像的透明颜色上触发？

我有一张大背景图片和几张不同形状(例如球形)的小图片。我想在这些小图像上捕捉鼠标事件。问题是事件会在图像的整个矩形上触发。我可以在背景图像上使用图像贴图，但这不是一个好主意，因为小图像会在鼠标( Sprite )下发生变化。

Answer 1

您可以检查很多东西，可以是 svg 形状、路径或矩形的填充，也可以是 opacity 属性，具体取决于您如何使元素透明。

例如:

$('svg rect').mouseenter(function(){
    if($(this).attr('opacity') != 0){
      $('body').append('hovered element with colour');    
  }
});

这是一个例子:

http://codepen.io/EightArmsHQ/pen/zxLbXO

编辑

使用更复杂的图像，例如

http://mobilite.mobi/wp-content/uploads/white-rabbit-wallpapers-9.

您有两个选择。 (对我来说，一个平面设计师变成了网页设计师)更简单的方法是创建一个 SVG 命中图)

但更彻底的解决方案是使用 HTML5/JavaScript canvas 元素，它可以包含所有这些东西，但初始编码会更复杂。

如果你使用 canvas alpha hit detection 我相信你将能够通过谷歌搜索一些很好的结果，比如

Image map by alpha channel