Question

$(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; }

Answer 1

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

即

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

第二个问题是您在不删除其他类的情况下添加类。用户将鼠标移动到屏幕的两侧后，您应用DOM的{{1}}对象将有两个类，CSS和.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'); } });的{{1}}元素的尺寸与浏览器FireFox不相等。由于HTML事件位于Window元素上，因此只会在包含内容的页面区域中触发。要解决此问题，请将mousemove元素填满整个屏幕，无论内容如何。

HTML

Answer 2

jsFiddle Demo使用Firefox

这可能是因为你没有删除一次添加的课程

看看这项工作是否适合你

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

我使用$('body')代替$(this)，因为您要将adeneo

指出的课程添加到window

Answer 3

您无法向窗口添加课程。因此，将this替换为body。

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

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

});

Answer 4

我可能错了，但上面的代码看起来似乎正在尝试将类添加到window，这是我认为不可能的。试试这个 - ：

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

在某个计算区域上更改光标图标

4 个答案: