将鼠标悬停在图片上时如何在 tumblr 上显示标签？ [关闭]

Posted 2023-03-06

【中文标题】将鼠标悬停在图片上时如何在 tumblr 上显示标签？ [关闭]

【英文标题】：How to show tags on tumblr when you hover over a picture? [closed]

【发布时间】：2013-05-09 04:51:34

【问题描述】：

我得到了这个新主题 (http://soeststhemes.tumblr.com/casual)，但不幸的是它没有显示标签。我想在您将鼠标悬停在图像上时显示标签，有人知道如何在 html 上执行此操作吗？ 这个博客中的内容：http://yixing.tumblr.com/ 当您将鼠标悬停在标签上时，标签会显示在旁边

【问题讨论】：

你到底想要什么...??鼠标悬停在任何图像上时是否要显示一些文本...？

是的，当鼠标悬停在该图像上时，显示我用于该图像的标签

【参考方案1】：

由于这个主题没有标签，你必须添加它们。看看this useful guide tumblr 有关于创建自定义主题。

首先，您需要结构的 HTML。这是标签的简单部分：仅当帖子具有标签时才会出现 div 框，每个标签的链接由空格分隔。这必须粘贴在<div class="entry"> 的每个实例之后，以便它显示在所有类型的帖子中。

block:HasTags
 <div id="tags">
  block:Tags<a href="TagURL">Tag</a>&nbsp;/block:Tags 
 </div>
/block:HasTags    

现在 CSS 是让它在悬停帖子时出现和消失的原因，以及对其进行格式化。这应该与主题的 CSS 一起放在 HTML 代码中的 CustomCSS 之前。我添加了一些额外的行以使该部分与主题更加流畅。

#tags 
      /* Positions the tags section */
      position: absolute;
      bottom: 0px;
      left: 0px;
      /* Sets opacity to 0 to hide */
      opacity: 0;
      filter: alpha(opacity=0);
      /* Keeps the tags section over everything */
      z-index: 10;
      /* Extra: Width is the same as the post width */
      width: 100%;
      /* Extra: Background colour */
      background: white;
      /* Extra: Smooth transition (same as theme) */
      -webkit-transition: all 0.8s ease;
      -moz-transition: all 0.8s ease;
      transition: all 0.8s ease;


/* When hovering over .entry do this to #tags */
#entry:hover .tags 
      /* Opacity is maximum to show tags */
      opacity: 1;
      filter: alpha(opacity=100);

现在只需调整 CSS 以满足您的需求。您可以更改顶部或左侧的值，或者将它们更改为右侧或底部。也允许负值。

您可以使用您展示的主题查看我的示例here。

【讨论】：

您可能希望使用.tags 而不是#tags，因为页面上会同时出现多个帖子。

+1 表示感谢