如何使圖像可點擊而不是整個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;
}