背景圖像不透明度和：懸停

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事件。

實現「是光標在不透明像素上嗎？」測試可以通過兩種方式完成：首先是創建一個簡單的數學表達式（例如，如果圖像的不透明部分爲整齊的矩形，圓形或多邊形）。更困難的（和更小的瀏覽器支持的）的方法是將背景圖像加載到畫布對象，然後獲得當前像素值的不透明度圖和從那裏，像這樣：

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。