Question

我一直在标题中有一个大圆形徽标的网站上工作。徽标是一个锚标记，设置如下：

<a id="siteLogo" href="#" shape="circle" coords="157,155,147"><i>Site Logo</i></a>

相关CSS如下：

i { 
   visibility: hidden; }
#siteLogo {
   background-image: url(../imgs/sprites_main2.png);
   background-position: 1000px 1000px;
   background-repeat: no-repeat;
   border: none;
   border-radius: 100%;
   display: block;
   height: 294px;
   left: 10px;
   position: relative;
   top: 8px;
   width: 294px; }
#siteLogo:hover {
   background-position: -15px -324px; }

在锚标记上设置shape和coords属性将为我提供一个链接，其中包含Opera和Firefox中的圆形可点击（与普通方形相对）区域。 Chrome，Safari和IE不支持锚标记上的这些属性。我做了一些检查，似乎HTML5也不支持这些属性（如果我错了，请纠正我）。

我向社区提出的问题很简单。无论如何，我可以实现与上述类似的结果，即符合HTML5并且主要浏览器支持（我可以在没有IE支持的情况下使用），而无需使用图像映射或向我的HTML添加任何图像标记？

Javascript或jQuery解决方案是可以接受的。

Answer 1

我建议使用padding属性来增加可点击区域的大小。

Answer 2

这可能有点晚了，但您可以使用带圆角的<div>等。 E.g。

<div style="border-radius:50px; border:1px solid black; 
  width:100px; height:100px;"  
  onclick="merry_go()">Stuff goes here</div>

获得100px圈。

可以更改HTML锚标记的可点击区域的形状吗？

2 个答案: