カーソル変更ボタンが呼び出されない

Question

HTMLページのボタンから関数を呼び出して属性を設定しています。しかし、それは動作しているようには見えません。私はそれが理由であるかどうかを確認するために私のDOMコードを変更しようとしたし、カーソルが正しい場所であることを確認した。私はW3を見てきましたが、この基本的な質問に対して申し訳ありませんが、documentElement.setAttributeについてはあまり見つけられません。

function changeCursor1() { 
 
    document.documentElement.setAttribute("use-my-cursor", "1"); 
 
} 
 

 
function changeCursor2() { 
 
    document.documentElement.setAttribute("use-my-cursor", "2"); 
 
} 
 

 
function changeCursor3() { 
 
    document.documentElement.setAttribute("use-my-cursor", "3"); 
 
}

html[use-my-cursor="1"] { 
 
    cursor: url(Cursor1.png); 
 
} 
 

 
html[use-my-cursor="2"] { 
 
    cursor: url(Cursor2.png); 
 
} 
 

 
html[use-my-cursor="3"] { 
 
    cursor: url(Cursor 3.png); 
 
}

<button onclick="changeCursor1()" class="buttonStyle1"><img src="Cursor1.png" class="Button1"></button> 
 
<button onclick="changeCursor2()" class="buttonStyle2"><img src="Cursor2.png" class="Button2"></button> 
 
<button onclick="changeCursor3()" class="buttonStyle3"><img src="Cursor 3.png" class="Button3"></button>

Answer 1

あなたは同じように、デフォルトのカーソルを使用する場合：ここのように

html[use-my-cursor="1"] { 
    cursor: pointer; 
} 
html[use-my-cursor="2"] { 
    cursor: help; 
} 
html[use-my-cursor="3"] { 
    cursor: default; 
} 

：https://codepen.io/davidballester/pen/pWmEXjは、あなたのコードは、ので、あなたの問題は、おそらくあなたが使用している画像に関連して、動作しますカーソルとして。私はのように自動を追加する必要がありました

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_User_Interface/Using_URL_values_for_the_cursor_property

Answer 2

：あなたは、カーソルとしてカスタムイメージを使用する方法については、ヘルプのために、このページを参照することができ

html[use-my-cursor="1"] { 
    cursor: url(Cursor1.png), auto; 
} 
html[use-my-cursor="2"] { 
    cursor: url(Cursor2.png), auto; 
} 
html[use-my-cursor="3"] { 
    cursor: url(Cursor 3.png), auto; 
}