css鏈接圖像只能點擊一個部分

Question

我只想點擊左側的字母「F」和其他部分，使其不可點擊。我正在嘗試與CSS類潛水員，但不工作。

的Html

<a href="https://www.google.com" class="diver" target="_blank"> 
<div style="margin-top:0px;"> 
<img src="http://www.upslike.net/imgdb/facebook-4846a5.png" width="30%" height="60px"> 
</div> 
</a> 

CSS

<style> 
.diver a{ 
    display:block; 
    width:100px; 
    height:60px; 
} 
</style> 

CodePen

Answer 1

如果圖像必須在HTML。

注意：「通用重置」（*部分）會影響當前問題範圍之外的元素。頭腦，段落和列表值得關注。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.diver-wrap { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 1em; 
 
} 
 
a.diver { 
 
    position: absolute; 
 
    top:0; 
 
    left: 0; 
 
    width:100px; 
 
    height:60px; 
 
    background: rgba(0,0,0,.25); /* for visual reference */ 
 
}

<div class="diver-wrap"> 
 
    <img src="http://www.upslike.net/imgdb/facebook-4846a5.png" alt=""/> 
 
<a href="https://www.google.com" class="diver"></a> 
 
</div>