在某些计算区域上更改光标图标答案

【问题标题】：Change cursor icon when on certain calculated area在某些计算区域上更改光标图标
【发布时间】：2013-04-13 17:45:55
【问题描述】：

$(window).mousemove(function(e) {

   if(e.pageX > $(this).width()/2) {
       console.log('im on right');
    }else {
        console.log('im on left');
    }

});

简单明了，它可以工作，但是当：

$(window).mousemove(function(e) {

   if(e.pageX > $(this).width()/2) {
       $(this).addClass('horizontal');
    }else {
       $(this).addClass('vertical');
    }

});

它不起作用（没有任何变化），我错过了什么吗？

css：

.horizontal { cursor: w-resize; }
.vertical { cursor: n-resize; }

【问题讨论】：

你正在为窗口设置样式？？？
Ty 指出，我可以在正文中添加/删除类，它工作得非常好:D，但在 Firefox 上却没有:(

标签： jquery css dom cursor

【解决方案1】：

您正在向Window 对象添加一个类。 Window 对象没有等效的 HTML 元素，因此您不能对其应用 CSS。相反，您应该使用HTML 标记或BODY 标记。

即

$('html').addClass('class');

第二个问题是您添加类而不删除其他类。一旦用户将鼠标移动到屏幕的两侧，应用CSS 的DOM 对象将有两个类，.horizontal 和.vertical。要解决此问题，请使用removeClass()。

即

$('html').mousemove(function(e) {

   if(e.pageX > $('html').width()/2) {
       $('html').removeClass('vertical');
       $('html').addClass('horizontal');
   } else {
       $('html').removeClass('horizontal');
       $('html').addClass('vertical');
   }

});

编辑：

默认情况下，FireFox 的 HTML 元素的尺寸与浏览器 Window 的尺寸不同。由于mousemove 事件在HTML 元素上，它只会在有内容的页面区域内触发。要解决此问题，请让 HTML 元素填满整个屏幕，而不考虑内容。

html {
   width: 100%;
   height: 100%;
}

【讨论】：

@user690214 使用 Firebug 时，转到 HTML 选项卡并将鼠标悬停在 <html> 上。整个屏幕都变蓝了吗？如果是这样，请尝试修改代码，使其与较小的 <div> 一起使用。
在我的 FF 添加高度 && 宽度：100% 和绝对位置并指向此脚本的新 div 时，它在我的 FF 上工作，但它没有 html 高度 && 100%
我注意到一个错误，mousemove 事件应该在html 元素上，而不是Window 元素上。改变它，然后再试一次。（从技术上讲，它应该可以工作）
随心所欲地做它不起作用：D，对于我的例子，它似乎只适用于嵌套在 body 内的元素并且具有 100% 的 W & H（使用 FF 时）

【解决方案2】：

您不能将类添加到窗口。因此将this 替换为body。

$(window).mousemove(function(e) {

   if(e.pageX > $(this).width()/2) {
       $('body').addClass('horizontal');
    }else {
       $('body').addClass('vertical');
    }

});

【讨论】：

我这样做了，并添加了 classRemove，然后让它在 Chrome 上工作，但在 FF 上没有

【解决方案3】：

jsFiddle Demo 在火狐上工作

这可能是因为您在添加后并没有删除类

看看这个作品是否适合你

if(e.pageX > $(this).width()/2) {
       $('body').addClass('horizontal');
       $('body').removeClass('vertical');
 }else {
       $('body').removeClass('horizontal');
       $('body').addClass('vertical');
 }

我使用$('body') 而不是$(this)，因为您正在向window 添加类，正如adeneo 所指出的那样

【讨论】：

使用 FF/chrome 没有任何变化
@user690214 如果您有 Firebug for FireFox，当您在屏幕上移动鼠标或使用控制台尝试手动输入 addClass/removeClass 时，查看源视图中的 HTML 是否发生变化，看看是否工作。
在 Firebug 上查看时，类从水平->垂直->水平更改，但在页面上不可见
这是 FF 中的样式问题而不是 jQuery 问题。
是的，你需要确保你的body有足够的高度和宽度，这样你才能看到效果

【解决方案4】：

我可能错了，但您上面的代码看起来像是试图将类添加到window，我认为这是不可能的。试试这个-：

$(window).mousemove(function(e) {
   $this = $('body');
   if(e.pageX > $(this).width()/2) {
       $this.addClass('horizontal');
    }else {
       $this.addClass('vertical');
    }
});

【讨论】：