对于具有CSS定义的光标的div，如果鼠标不移动，则IE不会自动重置光标，同时使div隐藏 [英] For a div with a CSS-defined cursor, IE doesn't automatically reset the cursor if the mouse doesn't move while that div is made to hide
问题描述
我使用的是Eric Martin的 SimpleModal 插件。当显示模态弹出窗口时，我想将光标显示为忙，而不是弹出窗口本身，而是背景的叠加。这可以;它工作，我添加 cursor：wait 到overlay 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 / javascriptsrc =http://code.jquery.com/jquery-latest.js>< / script>
< script type =text / javascriptsrc =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）。
}
function hideModal（）{
$ .modal.close（）;
}
< / script>
< / head>
< body>
< button id =actionbuttononclick =modalTest（）;>测试< / button>
< div id =samplestyle =display：none>
< h2>示例数据< / h2>
< p>这是来自当前页面的一些示例数据< / p>
< p>您可以按ESC键关闭此对话框，或点击< a href =＃class =simplemodal-close>关闭< / a>。
< / div>
< / body>
< / html>
有人有任何建议吗？我试过其他的东西，如分配和删除CSS类的正文，并使用 body.wait {cursor：wait; } ，但是对于一个，当删除CSS类时，在IE中会出现相同的行为。
如果我可以在纯CSS
编辑：
p> Ok，我有一个想法，就像我提交这一点，尝试了，它的工作。我要在这里留下这个问题，以防有人绊倒这个。下面是修复： function hideModal（）{
$（＃simplemodal-overlay）。css cursor，default）;
$ .modal.close（）;
}
EDIT 2 ：
如果鼠标在显示弹出窗口时不移动，IE也不会更改为等待游标。
虽然这个问题现在有点老了，它似乎我找到一个解决方案，工作在一个非常类似的情况下，我不得不征服IE8到IE10。在我的示例中，有一个div层的位置固定覆盖整个页面有z索引300.它的目的是防止点击页面中的底层元素。它有一个游标样式等待设置。
当隐藏图层时，只要鼠标未移动，等待游标就不会改变为默认图层。
在隐藏层时缓解了这个问题：
// $ element是前面提到的覆盖层
$ element.hide（）;
//修复IE9和IE10中的问题
$（'body'）.focus（）;
//修复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的问题。 / p>
我希望这对某人有用。
I know that's a mouthful in the title, but here's what's happening...
I'm using Eric Martin's SimpleModal plugin in my project. When a modal popup is shown, I want to show the cursor as busy, not on the popup itself but on the overlay for the background. This is fine; it works, I added cursor:wait to the overlay div's CSS, and I don't to talk about why I shouldn't use the busy cursor.
The popup is shown when a webserive call beings and closes after some work is done (waiting for a webservice call to return -- it's initializing some things and takes a few seconds). So, if you have your mouse over the overlay, remaining still, and the popup is programmatically closed, the cursor remains busy until you move it, even though the container that had the cursor CSS defined for it is no longer under the mouse. This is not the case in Firefox.
I can reproduce it with this very simply example. Click the button, move your mouse off of the button but not onto the popup (just on the overlay), remove your hand from the mouse so it doesn't move, and wait for the popup to close itself. The cursor doesn't return to the default cursor.
<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>
Does anybody have any suggestions? I've tried other things, like assigning and removing CSS classes to the body and using body.wait { cursor: wait; }, but for one, the same behavior occurs in IE when the CSS class is removed.
If I could keep a solution in pure CSS that would awesome, but I'm open to anything else.
EDIT:
Ok, I had a thought just as I was submitted this and tried it out, and it worked. I'm going to leave this question here in case somebody stumbles upon this. Here's the fix:
function hideModal() {
$("#simplemodal-overlay").css("cursor","default");
$.modal.close();
}
EDIT 2:
IE also doesn't change to the wait cursor if the mouse isn't moving when the popup is shown. It would seem that IE ignores cursor CSS if the mouse isn't in motion.
Although this question is somewhat old now, it seems I found a solution that worked for a very similar case I had to conquer for IE8 to IE10. In my example there is a div layer with position fixed covering the whole page having z-index 300. Its purpose is the prevention of clicks on underlying elements in the page. It has a cursor style "wait" set. When the layer was hidden that wait cursor wouldn't change to the default one as long as the mouse wasn't moved.
So this is what I came up with to mitigate the problem when hiding the layer:
// $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 );
For simplicity reasons I only posted the according jQuery version above. I assume it should be easy to transform that to plain JavaScript if you wanted to ;-)
As a matter of fact this even fixed the problem for Chrome on Linux.
I hope this is useful for someone.
这篇关于对于具有CSS定义的光标的div，如果鼠标不移动，则IE不会自动重置光标，同时使div隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
