懸停狀態指針事件：無Javascript後備

我有一個圖像，它背後的透明部分可以懸停的列表元素。圖像必須位於列表元素的頂部。這可以通過懸停狀態指針事件：無Javascript後備

pointer-events:none;

在圖像上。

但是，11下的IE版本不支持此規則。我已經設法爲點擊事件找到多個javascript解決方案，但是隻有在列表元素上方懸停時，這些方法才起作用。

的jsfiddle：http://jsfiddle.net/9Y9TH/2/

懸停NAV 3將會給彈出子菜單。當您將光標移動到位於其上的圖像區域時，IE中的子菜單將消失，因爲IE不支持指針事件：無;

來源

2013-12-03 Pepe

最好的方法是調用DOM元素的getClientBoundingRects方法，該方法返回相對於視口的問題元素的頂部，右側，底部和左側，然後將其與鼠標的位置進行比較。當用戶移動鼠標時，此代碼將運行，所以我建議運行Modernizr的測試pointer-events執行它之前，因爲它可能會不必要地公平一點慢下來（常！）：

$('body').on('mousemove', function isPositionedOnElement(mouseEvent){ 
    var elementBox = yourElement.getBoundingClientRects(); 

    if (
    elementBox.top <= mouseEvent.screenY && 
    elementBox.bottom >= mouseEvent.screenY && 
    elementBox.left <= mouseEvent.screenX && 
    elementBox.right >= mouseEvent.screenX 
){ 
    // Your element is being hovered over! 
    } 
});

來源

2013-12-03 19:18:00 Barney

，因爲它可能放慢速度，我想最好是找到一種不同的解決方案來擺脫圖像？ – Pepe

@PépéArtist可能，但這取決於更廣泛的問題。你能用[jsFiddle]（http://jsfiddle.net）重現你的問題嗎？我們可能能夠找到一個不那麼複雜的解決方案！ – Barney

jsFiddle添加。 Maby的一個想法是每當一個列表元素被佔用時就激活mousecheck？ – Pepe

懸停狀態指針事件：無Javascript後備

回答

相關問題