0

195 x 29 の画像を使用して、誰かが地図画像にカーソルを合わせたときに手を置き換えたいと思います。私はこのcssを実行しようとしていますが、cssオプションが利用できない場合はjavascriptオプションを検討します. いくつかの異なる CSS オプションを試しましたが、探している結果が得られません。現在、CSSコードを次のように設定しています：

#docmap {float:left;width:620px;height:225px;}
.click a:hover {cursor:url(images/click.png) no-repeat !important;}

私のhtmlは次のとおりです。

<div id="docmap" class="click"><a href="http://goo.gl/maps/R3TXp" target="_blank"><img src="http://whistlerworks.com/clients/918smile/site/wp-content/themes/Karma/images/map.png" alt="" /></a></div>

助けてくれてありがとう。

4

3 に答える 3

2 
.click a {cursor: url(images/click.png), pointer}

https://developer.mozilla.org/en-US/docs/CSS/cursor/url

于 2013-02-27T15:06:25.290 に答える
1

これをチェックしてください。役立つかどうかを教えてくれるかもしれません

http://www.htmlgoodies.com/beyond/css/create-custom-cursors-with-javascript-and-css3.html#fbid=2P5qQIHDj3T

于 2013-02-27T15:07:57.353 に答える
0

最も安全な画像形式は、32x32 の 8 ビット白黒.icoファイルです。

@isherwood が述べたように、基本的な構文は次のとおりです。

.click a {
    cursor: url(my-icon.ico), auto;
}

JavaScript は役に立たないと思います。利用可能なブラウザー サポートは、CSS のみを介して行われる可能性があります。また、単純にサポートしていない一部のブラウザー (つまり、プログレッシブ エンハンスメント) と一緒に暮らすこともいとわない必要があります。

さまざまなブラウザーでのテスト

これは、さまざまな画像形式を使用するデモです。四角の上にマウスを移動すると、各ブラウザーで何が機能するかがわかります。いずれの場合も、動作する場合は蝶のカーソルが表示されます。

例外: 一番下の行は完全に透明な画像を使用しているため、カーソルはまったく表示されません。最初の 2 行の [ヘルプ] 列に、デフォルトのヘルプ アイコンが表示されます (これは、他のすべての正方形の代替カーソルです)。

于 2013-02-27T15:55:43.977 に答える