對於具有CSS定義的光標的div，如果鼠標在div無法移動時IE不會自動重置光標

我知道這是標題中的一個滿口，但以下是發生了什麼。。對於具有CSS定義的光標的div，如果鼠標在div無法移動時IE不會自動重置光標

我在我的項目中使用了Eric Martin的SimpleModal插件。當顯示一個模式彈出窗口時，我想將光標顯示爲繁忙，而不是彈出窗口本身，但是在背景的疊加層上。這可以;它的工作原理，我將cursor:wait添加到覆蓋div的CSS，我不會談論爲什麼我不應該使用忙光標。

彈出窗口顯示webserive調用生命並在完成一些工作後關閉（等待webservice調用返回 - 它正在初始化一些事情，需要幾秒鐘）。因此，如果將鼠標懸停在覆蓋圖上，並保持不變，並且彈出窗口在程序中處於關閉狀態，則光標會保持繁忙狀態，直到您將其移動爲止，即使爲其定義光標CSS的容器不再位於鼠標下方。在Firefox中情況並非如此。

我可以用這個非常簡單的例子重現它。單擊該按鈕，將鼠標移出按鈕但不會彈出（僅在覆蓋層上），將鼠標從鼠標上移開，使其不移動，然後等待彈出框關閉。遊標不會返回到默認遊標。

<html> 
<head> 
<style type="text/css"> 

#simplemodal-overlay { 
    background-color: #000; 
    cursor: wait; 
} 

#simplemodal-container { 
    color: #fff; 
    background-color: #333; 
    border: 8px solid #444; 
    padding: 12px; 
    width: 300px; 
} 

</style> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal.1.4.min.js"></script> 
<script type="text/javascript"> 

function modalTest() { 
    showModal(); 
    setTimeout(function() { 
     hideModal(); 
    }, 1500); 
} 

function showModal() { 
    $("#sample").modal(); 
} 

function hideModal() { 
    $.modal.close(); 
} 

</script> 
</head> 
<body> 

<button id="actionbutton" onclick="modalTest();">Test</button> 

<div id="sample" style="display:none"> 
<h2>Sample Data</h2> 
<p>This is some sample data from the current page</p> 
<p>You can press ESC to close this dialog or click <a href="#" class="simplemodal-close">close</a>.</p> 
</div> 

</body> 
</html>

有沒有人有任何建議？我試過其他的東西，比如分配和去除CSS類到主體，並且使用body.wait { cursor: wait; }，但是對於其中一個，當CSS類被移除時，IE中會出現相同的行爲。

如果我可以在純CSS中保留一個真棒的解決方案，但我對其他任何東西都是開放的。

編輯：

好吧，我就在我提交這個想法和嘗試過了，和它的工作。我會在這裏留下這個問題，以防有人絆倒這一點。這裏的修正：

function hideModal() { 
    $("#simplemodal-overlay").css("cursor","default"); 
    $.modal.close(); 
}

編輯2：

IE也如果顯示的彈出窗口，當鼠標不移動不改變到等待光標。看起來，如果鼠標不在運動中，IE忽略光標CSS。

來源

2010-11-04 Cᴏʀʏ

關於同一主題：http://stackoverflow.com/questions/2453807/javascript-mouse-cursor-change-on-page-load-in-firefox-browser-3-5 – 2010-11-04 21:22:15

謝謝！像魅力一樣工作。 – canisrufus 2011-04-22 22:07:06

雖然現在這個問題已經有點老了，但似乎我發現了一個解決方案，它適用於我必須爲IE8征服IE10的非常相似的情況。在我的示例中，有一個固定位置的div層覆蓋了整個頁面，其中z-index爲300.其目的是防止點擊頁面中的底層元素。它有一個遊標樣式「等待」集。只要鼠標未移動，隱藏圖層時，等待光標不會更改爲默認值。

原來這就是我想出了到隱藏層時緩解這個問題：

// $element is the covering layer mentioned in the prelude above 
$element.hide(); 

// Fixes the problem in IE9 and IE10 
$('body').focus(); 

// Fixes the problem in IE8 
var cursorFixLayer = $('<div></div>') 
    .css({ 
     zIndex: 32000, 
     cursor: 'default', 
     position: 'fixed', 
     top: 0, 
     left: 0, 
     width: '100%', 
     height: '100%', 
     background: 'transparent' 
    }) 
    .appendTo('body'); 

setTimeout(function() { 
    cursorFixLayer.remove(); 
    }, 20);

爲簡單起見，我只貼在上面的jQuery根據版本。我認爲如果你想要將它轉換爲普通的JavaScript應該很容易;-)

事實上，這甚至解決了Linux上Chrome的問題。

我希望這對某人有用。

來源

2014-03-20 10:01:05 alex3683

有趣...感謝分享併爲線程帶來一點生活。我很好奇，爲什麼DOM操作修復了IE8，當我假設我正在使用的模式庫已經發生了非常類似的事情。 – 2014-03-20 14:50:16

IE的方法很神祕;）我的假設是，IE現在被迫重新計算包括新光標在內的所有內容，因爲新創建的div是以前不知道的。相比之下，document.body是已知的，因此在刷新視圖時可能會被忽略。 – alex3683 2014-03-20 16:06:31

對於具有CSS定義的光標的div，如果鼠標在div無法移動時IE不會自動重置光標

回答

相關問題