懸停區域在錯誤位置激活，內容與中心對齊

當我將頁面從左向左對齊時，圖像映射超鏈接仍然在圖像上的正確位置工作，但懸停區域（更改不透明度）正在觸發離他們應該在的地方太遠。懸停區域在錯誤位置激活，內容與中心對齊

有沒有辦法將不透明度更改添加到圖像映射本身，因爲這似乎正常工作，無論對齊？

另外，我注意到，如果在區域塊下方超鏈接是不可點擊的。理想情況下，我想在鼠標懸停時同時使用鏈接和懸停不透明功能。

，這裏是我的html：

<html> 
<head> 
<title>Title of Webpage</title> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
<div id="content"> 
<a id="area1" class="area"></a> 
<a id="area2" class="area"></a> 
<a id="area3" class="area"></a> 
<img src="logoandmenu.jpg" usemap="#map" /> 
<map name="map"> 
<!-- #$-:Image map file created by GIMP Image Map plug-in --> 
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> 
<!-- #$-:Please do not edit lines starting with "#$" --> 
<!-- #$VERSION:2.3 --> 
<!-- #$AUTHOR:Vampita --> 
<area shape="rect" coords="474,0,643,72" href="about_us.html" /> 
<area shape="rect" coords="644,0,813,72" href="fore_sale.html" /> 
<area shape="rect" coords="814,0,984,72" href="sold.html" /> 
</map> 
<img src="background2.jpg"> 
</div> 
</body> 
</html>

這裏是我的CSS：

body { 
    text-align:left; 
    margin: 0px; 
    padding: 0px; 
} 

#content { 
    margin:0 auto; 
    padding:0; 
    background: black; 
    width:100% 
    text-align:left; 
} 

.area { 
    background:#fff; 
    display:block; 
    height:72px; 
    opacity:0; 
    position:absolute; 
    width:170; 
} 
#area1 { 
    left:474px; 
} 
#area2 { 
    left:644px; 
} 
#area3 { 
    left:814px; 
} 
#area1:hover, #area2:hover, #area3:hover { 
    opacity:0.2; 
}

來源

2015-05-02 reckoner

所以它採取的研究一兩個小時B/C我是一個菜鳥，但我有一個想法從YouTube解說定位非常好的視頻（https://youtu.be/GqCj_sHxzGE）。顯然，將對象相對於頁面中心對齊比我想象的更復雜。

我最終放棄了圖像映射，只是在css中使用了具有懸浮功能的區域塊（請參閱下面的代碼）。

.area { 
    background:#fff; 
    display:inline-block; 
    opacity:0; 
    position:absolute; 
    width:170px; 
    height:72px; 
    left:50%; 
    margin-left:-18px; 
} 

#area2 { 
    left:50%; 
    margin-left:152px; 
} 

#area3 { 
    left:50%; 
    margin-left:322px; 
} 

#area1:hover, #area2:hover, #area3:hover:hover { 
    opacity:0.2; 
}

來源

2015-05-03 23:19:27 reckoner

懸停區域在錯誤位置激活，內容與中心對齊

回答

相關問題