style.cursor does not change cursor until after mouse move

In the following example, I have 2 divs, one inside another, with two
different cursors.

<div id='outer' style='cursor:hand;width:300px;height:300px'>
<div id='inner' style='cursor:crosshair;width:100px; height:100px'
onclick="this.style.display='none'">
Click to remove this div.
</div>
</div>

When I click on the inner div, I would expect the cursor to change
from 'crosshair' to 'hand'. Instead, it stays as a 'crosshair' until
I move the mouse.
Is there anyway to get IE to change the cursor immediately after the
div is invisible?

One solution I googled is using window.resizeBy(1,0) and
window.resizeBy(-1,0).
This solution is not practical because
1. It doesn't work if the browser has multiple tabs. and
2. An access violation occurs if the mouse is down.

<datvong@gmail.com> wrote in message
news:fa3ba1c2-f1cc-4ba5-a974-4759d21633b4@m36g2000hse.googlegroups.com...
> In the following example, I have 2 divs, one inside another, with two
> different cursors.
>
> <div id='outer' style='cursor:hand;width:300px;height:300px'>
> <div id='inner' style='cursor:crosshair;width:100px; height:100px'
> onclick="this.style.display='none'">
> Click to remove this div.
> </div>
> </div>
>
> When I click on the inner div, I would expect the cursor to change
> from 'crosshair' to 'hand'. Instead, it stays as a 'crosshair' until
> I move the mouse.

> Is there anyway to get IE to change the cursor immediately after the
> div is invisible?

You might try making the following change to your "onclick" event:

onclick="this.style.display='none';this.style.curs or='hand'">

Good luck,

Donald Anadell


>
> One solution I googled is using window.resizeBy(1,0) and
> window.resizeBy(-1,0).
> This solution is not practical because
> 1. It doesn't work if the browser has multiple tabs. and
> 2. An access violation occurs if the mouse is down.

Thank you Donald! I don't know why it works, but it does!!!
Thanks!!!


On Oct 28, 5:46*am, "Donald Anadell" <danad...@nospamersmikrotec.com>
wrote:
> <datv...@gmail.com> wrote in message
>
> news:fa3ba1c2-f1cc-4ba5-a974-4759d21633b4@m36g2000hse.googlegroups.com...
>
> > In the following example, I have 2 divs, one inside another, with two
> > different cursors.
>
> > <div id='outer' style='cursor:hand;width:300px;height:300px'>
> > *<div id='inner' style='cursor:crosshair;width:100px; height:100px'
> > onclick="this.style.display='none'">
> > * Click to remove this div.
> > *</div>
> > </div>
>
> > When I click on the inner div, I would expect the cursor to change
> > from 'crosshair' to 'hand'. *Instead, it stays as a 'crosshair' until
> > I move the mouse.
> > Is there anyway to get IE to change the cursor immediately after the
> > div is invisible?
>
> You might try making the following change to your "onclick" event:
>
> onclick="this.style.display='none';this.style.curs or='hand'">
>
> Good luck,
>
> Donald Anadell
>
>
>
> > One solution I googled is using window.resizeBy(1,0) and
> > window.resizeBy(-1,0).
> > This solution is not practical because
> > 1. It doesn't work if the browser has multiple tabs. *and
> > 2. An access violation occurs if the mouse is down.

<datvong@gmail.com> wrote in message
news:a20c17f9-e2d2-48a4-a796-77153bd85867@40g2000prx.googlegroups.com...
>Thank you Donald! I don't know why it works, but it does!!!
>Thanks!!!

You're welcome.

Good luck,

Donald Anadell




On Oct 28, 5:46 am, "Donald Anadell" <danad...@nospamersmikrotec.com>
wrote:
> <datv...@gmail.com> wrote in message
>
> news:fa3ba1c2-f1cc-4ba5-a974-4759d21633b4@m36g2000hse.googlegroups.com...
>
> > In the following example, I have 2 divs, one inside another, with two
> > different cursors.
>
> > <div id='outer' style='cursor:hand;width:300px;height:300px'>
> > <div id='inner' style='cursor:crosshair;width:100px; height:100px'
> > onclick="this.style.display='none'">
> > Click to remove this div.
> > </div>
> > </div>
>
> > When I click on the inner div, I would expect the cursor to change
> > from 'crosshair' to 'hand'. Instead, it stays as a 'crosshair' until
> > I move the mouse.
> > Is there anyway to get IE to change the cursor immediately after the
> > div is invisible?
>
> You might try making the following change to your "onclick" event:
>
> onclick="this.style.display='none';this.style.curs or='hand'">
>
> Good luck,
>
> Donald Anadell
>
>
>
> > One solution I googled is using window.resizeBy(1,0) and
> > window.resizeBy(-1,0).
> > This solution is not practical because
> > 1. It doesn't work if the browser has multiple tabs. and
> > 2. An access violation occurs if the mouse is down.