html, svg, css 如何使鼠标事件不在透明色上触发

Question

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

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

Answer 1

你可以做的是为那些小的小形状添加类。例如

<div class="big_back" id="big_back">
<div class="small_shapes" id="shape1">
</div>
<div class="small_shapes" id="shape2">
</div>
<div class="small_shapes" id="shape3">
</div>
</div>

在jquery中，您可以按如下方式调用方法

$(document).ready(function() {
$(".small_shapes").mouseenter(function() {
alert("I enteres shapes");
});

}); 如果这不是您想要的，请告诉我。

Answer 2

您可以检查很多东西，可以是 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 我相信你会 google 一些很好的结果，比如

html, svg, css 如何使鼠标事件不在透明色上触发

html, svg, css how to make mouse event not fire on transparent color

html

javascript

css

svg

编辑

Image map by alpha channel