对于具有 CSS 定义光标的 div，如果在隐藏该 div 时鼠标不移动，IE 不会自动重置光标

发布于 2024-10-01 04:50:33 字数 2257 浏览 6 评论 0原文

我知道标题中的内容很拗口，但这就是发生的事情......

我正在使用 Eric Martin 的 SimpleModal< /a> 我的项目中的插件。当显示模式弹出窗口时，我想将光标显示为忙碌，不是在弹出窗口本身上，而是在背景的覆盖层上。这很好；它有效，我将 cursor:wait 添加到了覆盖 div 的 CSS 中，并且我不谈论为什么我不应该使用繁忙的光标。

当 Web 服务调用启动并在完成某些工作后关闭（等待 Web 服务调用返回 - 它正在初始化一些内容并需要几秒钟）时，会显示弹出窗口。因此，如果您将鼠标放在覆盖层上并保持静止，并且以编程方式关闭弹出窗口，则光标将保持忙碌状态，直到您移动它，即使为其定义了光标 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。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

○闲身 2024-10-08 04:50:33

虽然这个问题现在有点老了，但我似乎找到了一个解决方案，适用于我必须克服 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 的问题。

我希望这对某人有用。

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.

回复收藏 0 原文

~没有更多了~