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

Question

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

Answer 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。