JavaScript cannot convince the mouse to change its cursor

Question

I have an ASP.NET page with the Infragistics website. I handle mouseover, mouseout events on grid lines in several ways in Javascript to change the mouse cursor to a pointer and return to default as they traverse lines. I also switch the color of the line with the mouse add-on.

When I launch the page in debugging locally, it works fine. When I publish a test server and run it outside VS in Iexplore (8), the mouse cursor does not change. He remains an arrow. The string correctly changes the background color.

I realized that this is a caching problem, but when I add a warning window to the methods to display document.body.style.cursor, it correctly displays the state of the cursor in the warning; it just does not change the mouse cursor. I cleared the cache in the browser, deleted and republished, added GUID errors to the links to javascript files, etc.

If I try the page on a test server in Firefox, it will show the 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 very welcome!

UPDATE: I also have similar CSS issues

Answer 1

The answer was found here.

"When IE maps to localhost, it will use standard compatible mode.

However, when it is displayed on the Intranet, it will use compatibility mode.

Do not ask me why this is done, this is just one of those arbitrary MS things to liven up our developer lives.

Just add this to your header to get IE to work in standard mode:

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

Answer 2

Do it with CSS:

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

OR

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

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

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

Please note that the above example is for illustration only.

Answer 3

You should set the cursor at the cell level, not at the document level.

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