在图像映射区域上设置光标[使用CSS] [英] Setting a cursor [with CSS] on an image map area

问题描述

有没有任何方法在CSS上的区域元素上设置游标似乎不是。

< area {cursor：help;}


HTML

 < img src =blah.pngwidth =800height =550alt =Blahusemap =＃blah-map> 
< map name =blah-map> 
< area shape =rectcoords =104,86,210,113href =okgo.htmalt =OK Go> 
< / map> 
  

我能够想出的最好的黑客是绝对地定位一个链接

$ p

解决方案

我最近有一个问题，css光标显示在firefox正确，但不是在chrome或safari。

很长的故事短，我最终需要设置display：block;在区域标签。我的基本CSS或浏览器默认标记显示：无;

这是我创建的快速测试用例（检查 HERE ）

 < img usemap =＃map src =http://i.imgur.com/9EcEvkn.jpgheight =120width =100/> 
< map name =mapid =map> 
< area shape =rectcoords =0,0,120,100href =＃/> 
< / map> 
 
 area {
 cursor：crosshair; 
 display：block; 
} 
  

希望这有助于某人。

Is there any way to set a cursor on an area element with CSS? It seems not. This code appears to do nothing at all.

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>

The best hack I have been able to come up with is to absolutely position a link on top of that area, and give it the cursor style.

解决方案

I recently had an issue with a css cursor displaying in firefox correctly, but not in chrome or safari.

Long story short, I ended up needed to set display:block; on the area tag. Either my base css, or the browser defaults the tag to display:none;

This was the quick test case I created (check it out 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;
}

Hopefully this helps someone.

这篇关于在图像映射区域上设置光标[使用CSS]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！