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是悬停帖子时显示和消失的原因，也是格式化它的原因。这应该放在HTML代码中的{CustomCSS}之前，以及主题的CSS。我添加了一些额外的行，以使该部分更加流畅。

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

当您将鼠标悬停在图片上时，如何在tumblr上显示标签？

1 个答案: