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>