html - css 链接图片只能点击一部分

Question

我只想单击左侧字母“F”和其他部分以使其不可单击。我正在尝试使用 css class diver 但没有用。

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>