當鼠標懸停在圖片上時，如何在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是什麼使得它看起來並在徘徊後，以及格式化消失。這應該放在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。