css - 如何只使图像可点击而不是整个 div？

Question

<div class="r1">
    <a href="http://..."><img src="..." />
        <div class="text1">TEXT</div>
    </a>
</div>

这是我正在使用的标记。我遇到的问题是 DIV(整个框)正在成为一个超链接。我只希望图像超链接。我使用的图像更像是一个圆圈中的三 Angular 形，因此您有一些重叠的盒装 div。

文本部分在一个 div 中 [因为我是一个新手，因为我是这样说的] 而且因为单词是 Angular ，例如像 44 度 Angular 一样适合像图像一样的三 Angular 形.

Answer 1

您的 div 正在对超链接使用react，因为您在 a 中拥有整个内部 div标签。尝试转移 </a>在 <img> 的末尾标签。像这样:

<div class="r1">
    <a href="http://..."><img src="..." /></a>
    <div class="text1">
         TEXT
    </div>
</div>

---

根据您的评论，您似乎希望在图像和文本上都具有超链接。如果是这样，那么您正在做的事情就很好了。它可能在视觉上看起来像您点击了整个外部 div，但您没有点击外部 div，您实际上点击了其中的内容，这是因为您在外部 div 中没有任何其他内容。