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

Question

Is it possible to make a mouse event not fire on transparent color of an image?

I have a big background image and several small images which are shaped in different shapes (for example the shape of a ball). I want to catch mouse events on these small images. The problem is that events fire on the whole rect of an image. I can use image map on the background image but this is not a good idea because the small images will be changing under mouse (sprites).

Answer 1

You can check a number of things, either the fill of an svg shape, path or rect or also the opacity property depending on how you have made the element transparent.

For instance:

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

Here is an example:

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

Edit

With more complex images like

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

You have two options. The (to me, a graphic designer turned web designer) the simpler way would be to create an SVG hit map)

But a solution that would be far more thorough would be to use HTML5 / JavaScript canvas element which can have all of this stuff included, but will be more complex to initially code.

If you use the words canvas alpha hit detection I'm sure you'll be able to google some great results, such as

Image map by alpha channel

Answer 2

what you can do is add classes for those small small shapes. for example

<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>

and in jquery you can call the method as follow

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

}); If this is not what you are looking let me know.