A-frame show mouse pointer with a function

Question

I am currently using a scene using A-frame (https://aframe.io) where I am hiding the mouse pointer in my scene. How can I create something where when a function is issued, my mouse pointer will show and when another function occurs, my mouse pointer will hide.

Currently the dfeault is that my mouse pointer is hidden. I want it so that when a function called "showPointer" occurs, my mouse pointer will show again and when a function called hidePointer occurs, my mouse pointer will hide again. How can I acheive this. My functions:

<script>
function hidePointer() {
//hide mouse pointer
}

function showPointer() {
//show mouse pointer 
} 
</script>

Answer 1

<script>
function hidePointer() {
  $('a-scene').canvas.style.cursor='none'
}
            
function showPointer() {
  $('a-scene').canvas.style.cursor='pointer'
  // replace "pointer" with other style keyword
} 
</script>

more detail about cursor style, check here

please make sure canvas element rm class a-grab-cursor from canvas

remove with this $('a-frame').classList.remove("a-grab-cursor")

check detail here

if you using 'cursor' component, please disable mouse cursor styles enabled