如何使图像可点击而不是整个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。尝试在</a>标记的末尾移动<img>。像这样：

<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;
}