logo标签列表

如何使只有图片可点击，而不是整个 div？

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

这是我使用的标记。我的问题是整个 DIV（整个框）都成为了超链接。我只想让图像成为超链接。我使用的图像更像是圆形中的三角形，因此框状 DIV 有些重叠。
文字部分在一个 div 中 [因为我是新手，这对我来说是有意义的]，也因为这些单词呈角度，例如像 44 度角度适应三角形图像内部。
6个回答
3

你的div元素对超链接做出反应，因为你将整个内部div放在了a标签中。尝试将</a>放到<img>标签的末尾。像这样：

<div class="r1">
    <a href="http://..."><img src="..." /></a>
    <div class="text1">
         TEXT
    </div>
</div>
根据您的评论，似乎您希望在图像和文本上都有超链接。如果是这样，那么您所做的就很好。它可能在视觉上看起来像您点击了整个外部div，但实际上您没有点击外部div，而是点击了其内部的内容，这是因为您没有在外部div里面放置其他东西。
抱歉如果我没有解释清楚。想象一下5个三角形，它们都是单独的图像，其中三角形的点指向中心。每一个这样的图像都需要成为一个链接。但是div会在图像周围创建一个虚拟框，这些框会重叠在其他图像上，所以当你点击其中一个三角形时，实际上会打开另一个三角形。我希望div内部的文字也可以成为链接。因此，基本上我想要图像和文字，但不包括透明部分。 - Tim Cooley
@TimCooley 嗯...我现在明白了。对于布局编码仍有一些疑问。为什么你要将一个 div 中的文本显示到另一个 div 中呢？我的意思是，代码中紫色图像中写的文本（其中写着 STRETCH）被显示在绿色图像（FULL BODY）中。你为什么要这样做呢？难道不能在同一图像的内部 div 中显示文本吗？ - Harry Joy
是的，我刚刚修复了所有这些问题 :-) 有人编写了代码并搞乱了我的工作，现在已经正确了。 - Tim Cooley
我刚刚制作了这个页面，以便您可以看到真正的问题，并且所有常规编码都在工作。在这个例子中，当您单击按钮时，将打开一个视频。但是，如果您进入错误的位置，则会打开错误的视频。我希望这真的有所帮助。 - Tim Cooley
不好意思，我仍然有div覆盖的问题。抱歉让您感到困惑。 - Tim Cooley
显示剩余5条评论
2

试试这个

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

你的语法出错了，请试试这个……

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

试试这个：

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

尝试这段代码...

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

嘿，现在像这样使用它

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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接