Cursor vanishes until mouse movement detected (Chrome browser)

Question

Cursor vanishes until mouse movement detected (Chrome browser)

In the HTML page I created, the mouse cursor is initially set to none. However, there are certain circumstances where I need it to switch to crosshair. The issue I am facing is that the cursor does not appear unless the user moves the mouse. If the mouse remains stationary, the cursor stays invisible.

Is there a way for me to instruct the browser to refresh and redraw the cursor without requiring the user to move their mouse?

UPDATE: While a similar question was posed before, it did not address the specific problem I encountered in Chrome despite being resolved in Firefox and Internet Explorer.

html css

Answer 1

Answer №1

Before attempting anything else, make sure to review this initial response, as it could provide the solution you seek. If that doesn't solve your issue, consider manually triggering the event itself. Keep in mind, however, that simply triggering the event doesn't guarantee that the browser will update the mouse cursor:

// listen for 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);

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

If this approach fails, experiment with different mouse events to troubleshoot further.

Answer 2

Before attempting anything else, make sure to review this initial response, as it could provide the solution you seek. If that doesn't solve your issue, consider manually triggering the event itself. Keep in mind, however, that simply triggering the event doesn't guarantee that the browser will update the mouse cursor:

// listen for 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);

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

If this approach fails, experiment with different mouse events to troubleshoot further.

Answer 3

Answer №2

Experiment with the style attribute cursor: default;

To make the cursor invisible, use none. Be cautious as this will completely hide the cursor.

An external element may be overriding the CSS property for pointer, possibly on the <body> or <html> elements or a parent container.

Answer 4

Experiment with the style attribute cursor: default;

To make the cursor invisible, use none. Be cautious as this will completely hide the cursor.

An external element may be overriding the CSS property for pointer, possibly on the <body> or <html> elements or a parent container.

Cursor vanishes until mouse movement detected (Chrome browser)

Answer №1

Answer №2

Similar questions

Try implementing a body template when using the mailto function

The component is not responding to list scrolling

Creating time input forms that are responsive can be achieved by leveraging the features of Bootstrap

Looking to locate .zip files using PHP Simple HTML DOM Parser?

How do I directly display a variable in index.html using node.js?

What is preventing my hidden field from being filled by a JavaScript function?

Tips for closing the navbar by clicking elsewhere on the page

Guide to Pechkin: Instructions and Resources

The functionality of jquery .serialize is not effective when used on forms that are generated dynamically

Uncovering unseen tags generated by JavaScript on a webpage using Python

How can I apply styles to table cells based on their data type using HTML and CSS?

``How can I easily navigate to the top of the page when changing routes in React Router DOM v6?

Effortless Numerical Calculation for Trio Input Fields

Utilizing jQuery's Chained Selectors: Implementing Selectors on Previously Filtered Elements

Guide to Designing a Three-Column Layout Using Only CSS

Creating custom styles using Material-UI's makeStyles function with both before and after

Concealing specific sections of HTML content in a webview on the fly

Maintain visibility of the vertical scroll bar while scrolling horizontally

Integrate a scrollbar seamlessly while maintaining the website's responsiveness

Text alignment below a div with absolute positioning