设置图像锚可点击区域，圈

，如果你一定要帮我的能力，你有你需要帮助我，那么知识，请考虑一下：设置图像锚可点击区域，圈

我有一个圆形的标志，我的网站，是有可能将锚标记的可点击区域变成圆形以匹配图像？

下面是相关代码：

HTML：

 <div class="container clearfix"> 
     <div class="hheader"> 
      <a id="logo" href="#" title="Return to home"> 
      <img src="http://i.imgur.com/sfKCJEY.png" alt="Density Art Logo"> 
      </a> 
      <img id="motto" src="http://i.imgur.com/qN6f4fZ.png" alt="We make websites, art and more"> 
     </div>

CSS：

#logo { 
display:inline; 
position: absolute; 
margin: -30px 0px 0px 10px; 
} 

#logo:hover { 
background: black; 
} 

#motto { 
display:inline; 
float: right; 
margin-top: -20px; 

} 

.hheader { 
background-color: #005073; 
background-image: url(images/header.png), -webkit-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Safari 5.1 to 6.0 */ 
background-image: url(images/header.png), -o-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Opera 11.1 to 12.0 */ 
background-image: url(images/header.png), -moz-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Firefox 3.6 to 15 */ 
background-image: urk(images/header.png), linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* Standard syntax */ 
box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4); /* Standard syntax */ 
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4); 
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4); 
border-style: solid; 
border-width: 1px; 
border-color: black; 
margin-bottom: 25px; 
margin-top: 15px; 
height: 195px; 
} 

.container { 
width: 960px; 
padding: 0 10px; 
margin: 0 auto; 
}

https://jsfiddle.net/uedwp4be/

我做了该地区的黑上悬停，所以你可以看到什么我的意思是。

P.S对CSS和HTML很新颖，所以请只输入初学者友好的建议。

完全谢谢任何知道你会帮助我的善良和知识渊博的会员。

来源

2015-11-28 Matt B

你可以删除'#logo：hover'从CSS –

绝对，在jsfiddler？ –

是的，我知道。我建议你删除'#logo：hover'上的css效果。然后它不会显示黑色背景。 –

您可以使用图像映射来完成此操作。注意如何黑色只有当鼠标悬停标志外出现，并且当鼠标悬停在标志光标切换到指针：

<div class="container clearfix"> 
    <div class="hheader"> 
     <img id="logo" src="http://i.imgur.com/sfKCJEY.png" alt="Density Art Logo" usemap="#logomap"> 
     <map name="logomap"> 
      <area shape="circle" coords="130,125,110" alt="Return to home" href="#"> 
     </map> 
     <img id="motto" src="http://i.imgur.com/qN6f4fZ.png" alt="We make websites, art and more"> 
    </div> 
</div>

的coords为<area shape="circle">是x轴，y轴，半径。要获得“hoverable”区域的中心：从左边

测量中途（你的形象是〜260px宽，所以“130”）
测量从顶部中途（图像是〜250像素高，所以“125”）
添加半径（你的圈子〜220px在DIAMETRE，所以“110”）

还要注意的是，像现在有一个新的属性，usemap="#logomap"和<map>的名字是“logomap”。

https://jsfiddle.net/uedwp4be/7/

来源

2015-11-28 05:37:32 Jonathan

非常感谢你分享你的知识和经验 –

设置图像锚可点击区域，圈

回答

相关问题