Question

我在网站上使用了彩盒，但是当我将鼠标悬停在缩略图上时，我们无法弄清楚如何关闭标题文字。我想保留文本以便在看到完整尺寸图像时用作照片标题，只需将其隐藏在缩略图悬停状态即可。

我已经看到一些js解决方案可以完全关闭它们，这不是我想要的。我也使用了colorbox js本身，并且能够关闭全尺寸图像的文本，但这与我想要的相反。我的技能是HTML和CSS ......我已经尝试过qtip，但现在有点超出我的想法。

我的HTML基本上是这样的：

 <li class="imgTitle"><a class="group1" href="images/bigPhoto.png" title="This tooltip is showing all the formatting tags like <br /> that I need to style my big photo caption <br />No one wants to see this HTML code while hovering over a thumbnail<br />Can I turn it off until you actually click the image<img src="images/thumbnailPhoto.png" /></a> </li>

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

Answer 1

尝试使用除title属性之外的某些（隐藏）元素，然后将其作为颜色框中的设置，将title选项设置为该元素的显示副本，例如：

HTML：

<li class="imgTitle">
  <a class="group1" href="images/bigPhoto.png">
    <span class="caption" style="display: none;">
      I'm a caption that's not in a title attribute anymore
    </span>
    <img src="images/thumbnailPhoto.png" />
  </a>
</li>

JS可能是这样的：

$(".group1").colorbox({
  title: function() {
    return $(this).find("span.caption").clone().show();
  },
  // other settings/options here
});

以上是 a fiddle 。我添加了.clone()部分，因为当我在一个库中实现类似的东西时，它们在点击所有图像后就消失了。

隐藏彩色框标题文本，显示为全尺寸图像的照片标题

1 个答案: