2012-09-11 11 views
6

カーソル用のデフォルト画像を変更する必要があります:カスタム画像付きポインタ。html、css - カーソル - ポインタのデフォルト画像を変更する方法

クラスを作成し、カーソルのホバー値を指定することは有効な解決策ではありません。既に作成されたすべての要素にそのクラスを追加する必要があります。正確には最適ではありません。また、そのクラスをbodyに追加することはできません。なぜなら、cursor:pointerを持つ子はそれを上書きするからです。

どうすればいいですか?

答えて

3

私は、カーソルのデフォルトの画像に変更する必要がありますいくつかのカスタムイメージでポインタを。

私は誤解していましたが、最初はそれが読まれましたが、this commentを読んだところ、物事はより明確になりました。

これはjQuery/JavaScriptを使用して簡単に行うことができます。

$("*").each(function() { 
    var cur = $(this); 
    if(cur.css("cursor") == "pointer") { 
     cur.css("cursor", "url(newcursor.ico)"); 
    } 
}); 

ピュアJavaScriptバージョン:まず、ここで少し、シンプルなjQueryのバージョンだ

var elms = document.getElementsByTagName("*"); 
var n = elms.length; 
for(var i = 0; i < n; i ++) { 
    if(window.getComputedStyle(elms[i]).cursor == "pointer") { 
     elms[i].style.cursor = "url(newcursor.ico)"; 
    } 
} 
+0

これは私が必要としているようです。私はjsと理想的ではないが、他の方法よりも優れている。 1つの簡単な質問...これはちょっと言うことはありません...プロセッサは高価です(私はマウスの動きでこれをチェックして、ホバーを確認する必要があるようです)? – zozo

+0

@zozoいいえ、あなたはmousemoveでチェックしません。一度やります。あなたはデフォルトで 'ポインタ'カーソルを持つ要素を探し、代わりにカスタムカーソルを使います。 – Chris

+0

はい、しかし、ホバー上にポインタがある場合はどうなりますか?それらはその検索で見つけられません。 – zozo

1

この

.anyclass{ 
    cursor: URL(images/cursorimagefule.gif); 
    } 

イメージファイルが32×32以下

でなければならないなどのはいあなたは簡単にこれを行うことができます明らかにインターネットエクスプローラのみ

more info

.CURファイルをサポートしています
+2

ないダウン投票が、問題は、明示的に状態ん:*クラスを作成し、カーソルのホバー値を指定するには、私はすでに行われたすべての要素に、そのクラスを追加する必要がありますので、有効な解決策ではありません*。 –

+0

OPに必要なものではありません。[これを参照してください(http://stackoverflow.com/questions/12368502/html-css-cursor-how-to-change-default-image-for-pointer/12369387#comment16612213_12368621)。 – Chris

0

cursorの のオプションは、あなたが後でセレクタによって上書きされない限り、デフォルトとして機能するのに役立つであろうbody要素、のカスタムcursorを作成することができ

cursor:url(uri) 
5

を使用することができる画像はこちら http://www.echoecho.com/csscursors.htm 見つけることができますされています。

body { 
    cursor: URL(images/cursorimage.cur); /* IE */ 
    cursor: URL(images/cursorimage.gif); 
} 
+0

+1は継承を忘れないためです。 – Chris

+0

私は何とかカーソルを見る必要はありません。ポインタがいつ何とか見えるようにカーソルが必要です。それはカーソルを何かに変えます。ポインタがまだ手の場合。 – zozo

+1

その場合、カーソルを 'ポインタ 'にするすべての要素に対して特定のカーソルイメージを指定することに固執すると思います。だから、 'a'、' button' {/*...*/} 'など。 –

0

は、「カーソル」プロパティを使用すると、任意のCSSと同じですproperty-単に目的の要素に適用します:

<style type="text/css"> 
body{ 
    cursor: url(mycursor.cur) 
} 
</style> 

これは、代わりにカスタム画像にウェブページのデフォルトの矢印カーソルを変更します。

1

これらのどれも私には役に立たなかった。私はこのわずかに異なる構文を使用しなければなりませんでした。 lowercse 'url'、パスの周りの引用符、!importantの追加に注意してください。また、どんなサイズでも動作します。

body { 
    cursor: url("mouseSm.png"), auto !important; 
} 
関連する問題