如何将 <a> 标签放在另一个（更大的）<a> 标签上？答案

【问题标题】：How can I place <a> tags over another (greater) <a> tag?如何将 <a> 标签放在另一个（更大的）<a> 标签上？
【发布时间】：2012-09-14 08:48:17
【问题描述】：

情况如下：我在一个页面中有一系列缩略图，当用户将光标悬停在每个图像上时，我想显示几个关键字。这些关键字中的每一个都是指向搜索查询的锚标记。每个缩略图（图像）也应该是可点击的（通过关键字留下的空白）并指向特定页面。

我已经编码了所有内容，只是缺少一种在图像锚点上显示关键字锚点的方法。我已经尝试过使用 onclick="window.location.href=..." 但是当用户点击关键字时，也会触发 onclick（例如：如果我 ctrl+click 一个关键字，我会得到关键字搜索一个不同的窗口，但主窗口的内容也会改变）。

任何帮助将不胜感激。谢谢！

【问题讨论】：

所以基本上，是不是关键字锚点上的onclick事件正在级联到缩略图的onclick事件？？
您的 HTML、CSS 和 javascript 是什么？可能有一个使用有效 HTML 的解决方法。

标签： html image anchor hyperlink

【解决方案1】：

这很常见，绝对可以用纯 HTML 和 CSS 来完成。你也可以用 JavaScript 来做，但我宁愿尽可能避免这样做。

这个例子是完全有效的 HTML/CSS，应该没有奇怪的浏览器渲染问题（甚至可以追溯到 IE 6）。

http://jsfiddle.net/2JD76/1/

基本上你有一个包含元素，在本例中是一个 div，其中包含链接的缩略图和链接的关键字。默认情况下它们是隐藏的，只有在包含的 div 悬停时才会显示。

链接的缩略图是绝对定位的，以便从页面流中取出，然后允许链接的关键字出现在顶部。然后，我使用 z-indexes 确保关键字始终位于高于链接缩略图的图层上。

【讨论】：

这正是我想要的。谢谢楼主的回复，确实帮了大忙。祝你有美好的一天。
太棒了！很高兴我能帮忙。

【解决方案2】：

你不能。这是非法的html。附加一个改变当前位置而不是“更大”的点击处理程序。

【讨论】：

【解决方案3】：

我打算用很长的回复来回答，但是，请在此处查看我的 Jsfiddle。我之前试图解决一些问题，而且……检查一下。

http://jsfiddle.net/somdow/KSt6a/

如果您查看代码，它会按照您的描述进行操作。

在我的 Jsfiddle 上，有一个 div 框，其中有一个图像空间（这是你的图像所在的位置），图像在代码上，但不在 jsfiddle 上，所以你会看到 alt 标签 ....无论如何，在鼠标悬停时，它会弹出另一个 div，其中包含动态创建的文本。

你所要做的就是用你自己的图片替换图片内容，然后在这一行插入你想要的链接/关键字链接

.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');

把你的话放在<div class="portSecInner"> **YOUR WORDS HERE** </div>线之间

并更改 CSS 以满足您的需求。

哦 AND ps，删除这一行（下面），它是在“portSecInner”内动态附加文本的行，因为您要插入自己的文字，所以您不需要这一行。

$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");

【讨论】：