設置圖像錨可點擊區域，圈

，如果你一定要幫我的能力，你有你需要幫助我，那麼知識，請考慮一下：設置圖像錨可點擊區域，圈

我有一個圓形的標誌，我的網站，是有可能將錨標記的可點擊區域變成圓形以匹配圖像？

下面是相關代碼：

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

非常感謝你分享你的知識和經驗 –

設置圖像錨可點擊區域，圈

回答

相關問題