0

我通过我网站上的List Category Posts WordPress 插件创建了一个带有小（50x50 大小）缩略图的最小化赞助商部分（可以在这里看到）。此插件仅在您网站的任何位置显示来自某些类别的帖子。

我现在想在悬停图像时添加一个工具提示，它基本上会显示帖子the_content();。对于工具提示，我将使用qTip2，因为这似乎是最好的工具提示解决方案。

我的问题发生了，当悬停时没有任何反应。你能发现错误吗？我已经连续三天与这个问题作斗争了。

在查看 HTML 时，认为您无法修改它。代码可以在JSFIDDLE上找到（我希望代码有效，但我不确定，因为这是我第一次使用 JSFIDDLE）。

4

1 回答 1

1

您遇到的问题是 Qtip 内容的选择器。你有$(this).next('div:hidden')，但看起来你的文本实际上是在一个<p>标签中。

编辑：刚刚看到关于不编辑 HTML 的部分，你只需要修改你的选择器来选择下一个<p>标签。像这样的东西$(this).parent().next('p')[0].textContent，小提琴

编辑 2：理想情况下，我会编辑 HTML 并执行以下操作：

通过查看 Qtip2 文档，作者提供了将您想要的文本内容放入目标元素的属性的解决方案。这是一个证明这一点的小提琴。

相关的 HTML：

 <a href="http://dacc.fredrixdesign.com/global-imports-bmw-2/"><img width="50" height="50" src="http://dacc.fredrixdesign.com/wp-content/uploads/bmw-150x150.jpg" class="attachment-50x50 wp-post-image" alt="DACC Sponsor" qtip-content="Hello, I'm text!"/></a>

qTip 代码：

 $('.lcp_catlist a img').each(function () {
      $(this).qtip({
           content: $(this).next('div:hidden')
      });
  });
于 2013-03-11T22:55:41.027 回答