当用户将鼠标悬停在链接上时，在 Chrome 中更改光标样式失败

发布于 2024-11-08 06:01:28 字数 742 浏览 0 评论 0原文

我在 Chrome 中遇到了一个奇怪的问题。

当单击侧边栏链接时，我使用 ajax 回调将光标的 css 样式设置为“等待”。这在 Firefox 中完美运行，但在 Chrome 上，只有当我将鼠标悬停在链接之外时，光标样式才会发生变化 - 即，当用户仍然将鼠标悬停在链接上时，样式不会改变

我做错了什么？这是相关的代码：

// beforeSend callback
$('.ajax-link').bind('ajax:beforeSend', function() {
  $('body').css('cursor', 'wait');
  $('a').css('cursor', 'wait');  
  $('article.post').addClass('loading');    
});

// success callback    
$('.ajax-link').bind('ajax:success', function() {
  $('body').css('cursor', 'default');
  $('a').css('cursor', 'pointer');  
  $("article.post").html("<%= escape_javascript(render @post) %>");
});

如您所见，我也使用 $('a').css('cursor', 'wait'); 显式设置所有锚点的 css，以便它可以在firefox 但 Chrome 似乎没有注意到这一点。

原文

I have a strange problem that i'm seeing in Chrome.

I use an ajax callback to set the cursor's css style to "wait" when a sidebar link is clicked. This works perfectly in firefox, but on Chrome the cursor style only changes when I hover away from the link - i.e. the style doesn't change whilst the user is still hovered over the link

What am I doing wrong? Here's the relevant code:

// beforeSend callback
$('.ajax-link').bind('ajax:beforeSend', function() {
  $('body').css('cursor', 'wait');
  $('a').css('cursor', 'wait');  
  $('article.post').addClass('loading');    
});

// success callback    
$('.ajax-link').bind('ajax:success', function() {
  $('body').css('cursor', 'default');
  $('a').css('cursor', 'pointer');  
  $("article.post").html("<%= escape_javascript(render @post) %>");
});

As you can see I am explicitly setting the css for all anchors too with $('a').css('cursor', 'wait'); so that it works in firefox but Chrome doesn't seem to take notice of this.

分享到QQ

分享到微博