I want to change an element when the cursor changes its type, for instance when the cursor changes from pointer to a text (I-beam).
I have tried to use
document.addEventListener('mouseover', e => {
const tgt = e.target;
const computed = window.getComputedStyle(tgt)["cursor"]
console.log("Computed: " + computed)
});
but this just logs "Computed: auto". I want the know the cursor type specifically. I don't know if this is possible?
I think logging tgt.style.cursor should do the trick.
first, you need to define cursor style for one of your elements like this:
<style>
#cur{
cursor: pointer;
}
</style>
and then when mouseover on your element, it will change from auto to pionter
<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 which is default false and we are setting it to true by making if condition false whenever cursor changes.background-color so you can have better idea of it.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>