-7

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

4

1 回答 1

2

由于该主题没有标签，因此您必须将它们添加进去。看看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 是让它在悬停帖子时出现和消失的原因，以及格式化它。这应该{CustomCSS}与主题的 CSS 一起放在 HTML 代码之前。我添加了一些额外的线条以使该部分与主题更加流畅。

#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 以满足您的需求的一个案例。您可以更改顶部或左侧的值，或者将它们更改为右侧或底部。也允许负值。

您可以使用您展示的主题在此处查看我的示例。

于 2013-05-15T06:10:14.967 回答