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

Question

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

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

任何帮助都感激不尽。 谢谢！

Answer 1

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

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

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

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

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

Answer 2

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

Answer 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以满足您的需求。

哦和ps，删除这一行（下面），这是一个动态附加“portSecInner”内的文本，因为你要插入自己的单词，那么你不需要这一行。

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