JavaScript is not able to convince the mouse to change its cursor

Question

I have an ASP.NET page with an Infragistics webgrid on it. I handle the mouseover, mouseout events over the rows of the grid in a couple methods in Javascript to change the mouse cursor to the pointer and back to the default as they mouse over rows. I also toggle the color of the mouse-over'd row.

When I run the page in debug locally, it works fine. When I publish to the test server, and run it outside of VS in Iexplore (8), the mouse cursor does not change. It stays the arrow. The row toggles the background color correctly, though.

I figured this was a caching issue, but when I add an alert box in the methods to display the document.body.style.cursor, it shows the cursor state in the alert correctly; it just doesn't change the mouse cursor. I've cleared the cache in the browser, deleted and republished, added GUID querystrings to the javascript file links, etc.

If I try the page on the test server in Firefox, it shows the pointer cursor correctly.

 function _projGrid_MouseOverHandler(gridName, id, objectType) {

    if (objectType == 0) {
        document.body.style.cursor = 'pointer';
       // alert('mouse pointer should be: ' + document.body.style.cursor);
        var cell = igtbl_getCellById(id);
        var elem = cell.Element;
        setRowBackColor(cell.Row, "F0E68C");
    }
}

function _projGrid_MouseOutHandler(gridName, id, objectType) {
    if (objectType == 0) {
        document.body.style.cursor = 'default';
       // alert('mouse pointer should be: ' + document.body.style.cursor);
        var cell = igtbl_getCellById(id);
        setRowBackColor(cell.Row, "white");
    }
}

function setRowBackColor(row, color) {
    var cells = row.getCellElements();
    for (var i = 0; i < cells.length; i++) {
        cells[i].style.backgroundColor = color;
    }

Any ideas would be most welcome!

UPDATE: I am also having similar problems with CSS

Answer 1

Do it with CSS:

.grid .row:hover {
  cursor: pointer;
  background-color: #F0E68C;
}

OR

.grid tr:hover {
   /* ... */
}

If you don't have the necessary classes, you can try setting them with something like jQuery: $("selector").addClass("row"); You can also filter() with a custom function or work with each section individually if necessary:

$(".grid").each(function() {
  $(this).find("tr > td").each(function() {
    $(this).addClass("cell");
  });
});

Note that the above example is for illustration purposes only.

Answer 2

You should be setting the cursor on the cell level and not on the document level.

Not sure why you are setting the cursor with JavaScript in the first place when you can just set it in the CSS file for the tds in question.

Answer 3

Answer was found here

"When IE renders on localhost, it will use standard compliant mode.

However, when it renders on an Intranet, it will use compatibility mode.

Don't ask me why it does this, it's just one of those arbitrary MS things in order to spice up our developer lives.

Just add this to your header to force IE into standard compliant mode :

<meta http-equiv="X-UA-Compatible" content="IE=edge" />"