views:

1008

answers:

1

I'm trying to dynamically change the cursor style when the mouse is over an element. The cursor should be either "move" or "default" depending on a boolean returned by a method. The code is something like this:

$("#elemId").mousemove(function(event) {
    if(cursorShouldBeMove()) {
     $(this).css({'cursor':'move'});
    } else {
     $(this).css({'cursor':'default'});
    }
}

This code works like a charm in IE8,FF3,Chrome and Safari. Only Opera fails to handle it correctly.

I'm using Opera 9.6.4

Does anyone have an idea how to solve this?


I prepared a sample for testing;

var cursorStatus = true;
setInterval(function() { cursorStatus = !cursorStatus; }, 500);

function cursorShouldBeMove() {
  return cursorStatus;
}

$(function() {
  $("#elemId").mousemove(
    function(event) {
      $(this).css("cursor", cursorShouldBeMove() ? "move" : "default");
    }
  );
});

If you move your mouse from outside of #elemId to inside of it for a few times you will see that the cursor will change. But if you position your mouse in #elemId and move your mouse, cursor not changes.

The code is very simple. I think it's a bug of Opera.

I tested this code also with;

  • Firefox 3.5.1 (worked)
  • Internet Explorer 7 (worked)
  • Google Chrome 2.0 (worked)
  • Safari 3.2 (worked)

(Windows versions)

+2  A: 

Opera is real funny with cursors. I find that you have to move the mouse over the element twice before it actually works. Can see here that you need to hover over the Hello World twice to get the cursor to change.

Same issue described here

redsquare