是否可以使鼠标事件不在图像的透明颜色上触发?
我有一张大背景图片和几张不同形状(例如球形)的小图片。我想在这些小图像上捕捉鼠标事件。问题是事件会在图像的整个矩形上触发。我可以在背景图像上使用图像贴图,但这不是一个好主意,因为小图像会在鼠标( Sprite )下发生变化。
最佳答案
您可以检查很多东西,可以是 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
关于javascript - html, svg, css 如何使鼠标事件不触发透明颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28878797/