在圖像地圖區域上設置光標[使用CSS]

有什麼方法可以在使用CSS的area元素上設置cursor？看起來不是。這段代碼似乎什麼都不做。在圖像地圖區域上設置光標[使用CSS]

CSS

area {cursor: help;}

HTML

<img src="blah.png" width="800" height="550" alt="Blah" usemap="#blah-map"> 
<map name="blah-map"> 
    <area shape="rect" coords="104,86,210,113" href="okgo.htm" alt="OK Go"> 
</map>

最好的黑客，我已經能夠拿出是絕對定位在該區域頂部的鏈接，並給它光標樣式。

來源

2012-05-08 Bart

LO。 oks喜歡唯一的方法是通過java腳本強制它... – Elen

我最近有一個問題，正確顯示在Firefox中的CSS遊標，但不是在鉻或Safari瀏覽器。長話短說，我結束了需要設置顯示：塊;在區域標籤上。無論是我的基地的CSS，或瀏覽器默認標籤顯示：無;

這是我創建的快速測試案例（檢查出來HERE）

<img usemap="#map" src="http://i.imgur.com/9EcEvkn.jpg" height="120" width="100" /> 
<map name="map" id="map"> 
<area shape="rect" coords="0,0,120,100" href="#" /> 
</map> 

area { 
    cursor: crosshair; 
    display:block; 
}

希望這可以幫助別人。

來源

2013-08-21 20:47:18 toazron1

你，先生，是一個壞蛋 - 而且非常感謝jsfiddle。尼斯弗洛伊德圖像，順便說一句。 – mtyson

這應該被標記爲正確的解決方案，非常簡單和容易修復。 –

將鏈接絕對定位在圖片的頂部也是我的解決方案/破解。

如果它不是一個非常重要的圖像，您可以通過創建一個圖像作爲背景的容器，絕對定位鏈接，並使鏈接文本成爲您當前使用的alt文本，從而在語義上做到這一點。然後，使用鏈接上的負面text-indent來隱藏文本。它會按照你的意圖工作，但是當禁用CSS時，應該顯示純文本鏈接來代替人造圖像映射。

來源

2012-05-08 17:01:11

我曾希望有一些我錯過了，但它似乎沒有。感謝您的反饋。 – Bart

這不是正確的答案，因爲有問題的直接解決方案。 toazron1已發佈正確答案。 – rayred

CSS

#blah-map area{ 
    cursor:default; 
}

HTML

<img src="blah.png" width="800" height="550" alt="Blah" usemap="#blah-map"> 

<map id="blah-map" name="blah-map"> 
    <area shape="rect" coords="104,86,210,113" href="okgo.htm" alt="OK Go"> 
</map>

，只需提供地圖的ID，然後在設定的遊標類型爲ID的區域。

來源

2012-12-07 21:13:39 abriggs

你在鉻和safari中測試過嗎？它似乎並不適用於所有的鉻和Safari瀏覽器。 –

@SrdjanDejanovic，嘗試將圖像的_usemap_屬性設置爲地圖的_name_。 – abriggs

隨着Webkit的瀏覽器中，CSS：

area {cursor: help;} /* or other type */

不工作，所以我使用的「href」，你可以這樣

<area ... href="javascript:void(0);" />

來源

2013-09-10 11:48:47 guaph

通過給出的答案toazron1在工程完全禁用WebKit的/ Safari和沒有任何不好的問題：

CSS

area { 
    cursor: help; 
    display: block; 
}

的想法是正確display任何area，所以display: inline和令人驚訝display: initial也將工作，即使href屬性未設置。

來源

2014-11-12 02:25:59

這應該可能是一個評論，而不是一個答案。 – Chris

雖然這個挑戰已經得到解答，但我想分享一個我通過實驗發現的有用的IE解決方案。

問題：我正在處理圖像映射，我不希望光標在懸停時變爲手形/指針狀態。這是針對不需要實際錨鏈接的工具提示（qTip）實現。我希望光標保持爲一個箭頭（默認狀態）或在懸停時將其更改爲另一個狀態。？

我無法讓IE瀏覽器承認的樣式 - 光標依然改變懸停:(

解決方案作爲最後的嘗試，我添加樣式：

cursor: default; 
display: block;

，但我有關他們也用於地圖本身的形象：

area, img {cursor: default; display: block;}

希望這有助於一些

來源

2017-01-25 07:55:48 AjA

在圖像地圖區域上設置光標[使用CSS]

回答

相關問題