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

Question

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

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

文本部分在一个 div 中 [因为我是新手，所以对我来说是这样说的] 并且还因为这些词的角度例如 44 度角以适合三角形内的图像。

score 3 · Accepted Answer

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

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

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

score 2 · Accepted Answer

尝试这个

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

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

尝试这个：

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

score 0 · Accepted Answer

嘿，现在习惯了，就像这样

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

score 0 · Accepted Answer

试试这个代码..

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

6 回答 6