使用CSS的光標圖像

我想使用195 x 29的圖像來替換當某人懸停在地圖圖像上時的手。我試圖做這個CSS，但會考慮一個JavaScript選項，如果沒有CSS選項可用。我嘗試了幾個不同的CSS選項，但無法獲得我期待的結果。目前，我有我的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>

感謝您的幫助。

來源

2013-02-27 Renee

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

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

來源

2013-02-27 15:06:25 isherwood

檢查了這一點，可能會幫助讓我知道，如果它有用

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

來源

2013-02-27 15:07:57 Rosario

最安全的圖像格式是一個32×32的8位黑白.ico文件。

正如@isherwood提到的，基本的語法是：

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

我不認爲JavaScript的會有所幫助。任何可用的瀏覽器支持都可能僅通過CSS。而且你必須願意接受一些不支持它的瀏覽器（即漸進式增強）。

測試在不同的瀏覽器

這是一個使用多種圖片格式demo。將鼠標移到正方形上以查明每個瀏覽器中的工作。在每種情況下，如果它有效，您將看到一個蝴蝶光標。

例外情況：底行使用完全透明的圖像，因此您應該看不到任何光標。在前兩行中的「幫助」列中，您應該看到默認幫助圖標（這是所有其他方塊的後備光標）。

來源

2013-02-27 15:55:43

使用CSS的光標圖像

回答

相關問題