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

Question

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

我在谷歌上只能找到旧的 IE PNG 修复程序。

Answer 1

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

我想这也可以通过使用 jQuery 获取属性来为背景图像完成：

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

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

Answer 2

这是一些调整，但为什么不向不透明的 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元素的框。