Quiero cambiar un elemento cuando el cursor cambia de tipo, por ejemplo, cuando el cursor cambia de puntero a texto (I-beam).
he tratado de usar
document.addEventListener('mouseover', e => { const tgt = e.target; const computed = window.getComputedStyle(tgt)["cursor"] console.log("Computed: " + computed) });pero esto solo registra "Computado: automático". Quiero saber el tipo de cursor específicamente. No sé si esto es posible?
Creo que registrar tgt.style.cursor debería funcionar.
primero, debe definir el estilo del cursor para uno de sus elementos de esta manera:
<style> #cur{ cursor: pointer; } </style>y luego, cuando pase el mouse sobre su elemento, cambiará de automático a pionero
<div id="cur">mouse over</div> <script> document.addEventListener('mouseover', e => { const tgt = e.target; const computed = window.getComputedStyle(tgt)["cursor"] if(computed !== "auto"){ console.log(computed); } }); </script>hasCursorChange que es false por defecto y lo estamos configurando en verdadero al hacer que la condición sea falsa cada vez que cambia el cursor.background-color para que pueda tener una mejor idea.DOM . document.addEventListener( "mouseover", function(e) { var hasCusrorChnaged = false; var cursor = e.target.style.cursor; if (cursor != "") { if (!hasCusrorChnaged) { e.target.classList.add("change"); } } }, false ); .change { background-color: #ff0000; } <h1>Mouse over the words to change the cursor.</h1> <span style="cursor:auto">auto</span><br> <span style="cursor:crosshair">crosshair</span><br> <span style="cursor:default">default</span><br> <span style="cursor:e-resize">e-resize</span><br> <span style="cursor:grab">grab</span><br> <span style="cursor:help">help</span><br> <span style="cursor:move">move</span><br> <span style="cursor:n-resize">n-resize</span><br> <span style="cursor:ne-resize">ne-resize</span><br> <span style="cursor:nw-resize">nw-resize</span><br> <span style="cursor:pointer">pointer</span><br> <span style="cursor:progress">progress</span><br> <span style="cursor:s-resize">s-resize</span><br> <span style="cursor:se-resize">se-resize</span><br> <span style="cursor:sw-resize">sw-resize</span><br> <span style="cursor:text">text</span><br> <span style="cursor:w-resize">w-resize</span><br> <span style="cursor:wait">wait</span><br> <span style="cursor:not-allowed">not-allowed</span><br> <span style="cursor:no-drop">no-drop</span><br>