背景圖像不透明度和：hover

Question

僅當光標在div背景圖像的不透明部分上時才可以觸發div的鼠標懸停嗎？ 也許通過Javascript？

我可以在Google上找到的只是舊的IE PNG修復程序。

Answer 1

這看起來與此問題類似： 非透明像素的點擊檢測

我想也可以通過使用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 。