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

Question

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

这是我正在使用的标记。 我遇到的问题是DIV（整个盒子）正在变成一个超链接。 我只希望图像超链接。 我正在使用的图像更像是圆形中的三角形，所以你有一些盒装div。

文本部分在div中[因为我是一个newb并且从那以后我就这样说了]并且因为这些单词是角度的，例如像44度角一样适合三角形内部的图像。

Answer 1

你的div正在对超链接做出反应，因为你在a标签里面有整个内部div。 尝试在<img>标记的末尾移动</a> 。 像这样的东西：

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

---

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

Answer 2

试试这个

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

Answer 3

你的语法错了试试这个.......

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

Answer 4

试试这个：

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

Answer 5

试试这个代码..

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

Answer 6

嘿，现在就像这样

HTML

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

现在css习惯了这个

.r1 > a{
display:inline-block;
}

.r1 > a, .r1 > a img{
vertical-align:top;
}