背景图像不透明度和：悬停

Question

当光标位于div背景图像的不透明部分时，是否可以仅触发div的鼠标悬停？也许是通过Javascript？

我在Google上找到的只是旧的IE PNG修复程序。

Answer 1

这看起来与此类似的问题：Hit detection on non-transparent pixel

我想通过使用jQuery获取属性，也可以为背景图像做到这一点：

$('#myDiv').css('background-image');

我个人没有这样做，但它似乎是一个可行的解决方案。这仅适用于现代浏览器，但您应该能够使其与excanvas重新兼容。

Answer 2

这是一些调整，但为什么不在opaque div中添加一个类，并使用JavaScript来检查它？

在jQuery中：

$('div').mouseover(function(){
    if ($(this).is('.opaque')) {
        //Some actions
    }
 });

Answer 3

有可能，但不是很容易。你将不得不使用大量的Javascript。

您想要附加到<div>的onmousemove事件，该事件返回光标的X，Y坐标。然后，您的事件处理函数将测试以查看游标是否位于正确的位置，以便触发替代的onmouseover事件。

实现“光标是否是不透明的像素？”测试可以通过两种方式完成：第一种是创建一个简单的数学表达式（比如图像的不透明部分是否形成整齐的矩形，圆形或多边形）。更难（并且浏览器支持更少）的方法是将背景图像加载到Canvas对象中，然后获取当前像素值的不透明度数字并从那里获取，如下所示：

var pixel = canvas.getImageData(x, y, 1, 1).data;
var alpha = pixel[3]; // assuming RGBA
if( alpha > threshold ) onMouseOver(); // raise the event

另一个选择是创建一个完全透明的div（或其他一些元素），它们的位置和大小只能覆盖下面div的不透明部分，然后只测试该元素框的mouseover。