3

I have an HTML page where the mouse cursor is set to none. Under some circumstances I set it to crosshair. Unfortunately, the cursor is not shown until the user actually moves the mouse. If the mouse is not moved, the cursor remains invisible.

How can I tell the browser to redraw the cursor without moving the mouse?

EDIT: The possible duplicate is not a duplicate. Apparently the problem was resolved in Firefox and Internet Explorer, but not in Chrome.

zmbq
  • 38,013
  • 14
  • 101
  • 171
  • 1
    I remember a same question and I don't think there is a trivial solution for this ... will try to find that question – Temani Afif Jan 28 '19 at 23:08
  • Possible duplicate of [Update mouse cursor without moving mouse with changed CSS cursor property](https://stackoverflow.com/questions/37462132/update-mouse-cursor-without-moving-mouse-with-changed-css-cursor-property) – esqew Jan 28 '19 at 23:11
  • Please provide a [mcve]; – Kosh Jan 28 '19 at 23:29
  • In Firefox on osX, when I push `TAB` button mouse cursor disappears until I move the mouse... – Kosh Jan 28 '19 at 23:40
  • @KoshVery the question as stated is already clear. not all the questions needs an MCVE. *How can I tell the browser to redraw the cursor without moving the mouse?* --> no need code to ask for this – Temani Afif Jan 29 '19 at 08:53
  • @TemaniAfif, if I ask for a code example I need it. Phrase `under some circumstances` looks too broad to me. I don't think that MCVE would spoil the question. – Kosh Jan 29 '19 at 14:22
  • @KoshVery `under some circumstances` --> this means that the *circumstances* can be anything thus not relevant to the question. The question is *how can I tell the browser to redraw the cursor without moving the cursor*. Try any example where you change the cursor but without moving the mouse and you will see what happen. The old one stay the same. – Temani Afif Jan 29 '19 at 14:36

2 Answers2

1

Check out This answer first, it may be what you're looking for. If not, I would try to trigger the event manually. I'm not sure this would work, because even after the event is trigger, it does not guarantee that the browser will redraw the mouse cursor:

// listen to mouse move event
window.onmousemove = function(e) {
    console.log('mouse moved.', e);
};

// create and trigger the event
var event = new Event('mousemove');
window.dispatchEvent(event);

// should now see 'mouse move.' in the console.

If that doesn't work, you may want to test this with other mouse events.

Shahar
  • 2,269
  • 1
  • 27
  • 34
-3

try cursor: default;

The cursor should only be set to none if you DONT want the cursor to appear.

There must be something overriding the pointer attribute at some level of the page. Maybe on the <body> or on the <html> or the parent wrapper.

Zlerp
  • 467
  • 7
  • 16
  • I set it to none when I don't want it to appear. When I do want it to appear I set it to crosshair. It doesn't appear until the mouse is moved. – zmbq Jan 28 '19 at 23:10
  • do you have an example like a codepen or jsfiddle that shows this issue? – Zlerp Jan 29 '19 at 15:44