CSS3自定義工具提示淡入和淡出

Question

我做了自定義工具提示，並且在應用任何CSS3動畫之前，我顯示了使用display: none;隱藏它的那些工具提示，並且顯示了工具提示display: inline-block;。這工作正常，但現在我想要創建工具提示的不透明度，所以它具有很好的淡入淡出效果。但是，我有這方面的問題，所以我需要你的幫助。這是我已經試過：

.title div.tooltip{ 
    display: inline-block; 
    -webkit-transition: opacity 1s ease-in-out; 
     -moz-transition: opacity 1s ease-in-out; 
     -ms-transition: opacity 1s ease-in-out; 
     -o-transition: opacity 1s ease-in-out; 
     transition: opacity 1s ease-in-out; 
} 

.title:hover div.tooltip{ 
    display: inline-block; 
    filter: alpha(opacity=50); 
    opacity: 0.5; 
} 

，這是標記：

<li class="title"> 
<div class="tooltip"> 
<label><em>Full title:</em> <?php echo $groups['title']; ?></label><br> 
<label><em>Description:</em> <?php echo $groups['description']; ?></label><br> 
</div> 
</li> 

Answer 1

卸下filter: alpha(opacity=50);並添加opacity:0;到.title div.tooltip{...爲我工作。

不透明度的默認值爲1，所以淡入度從1到0.5 - 此外，我相信filter: alpha(opacity=50)完全覆蓋不透明度過渡並跳到不透明度= 50。你也可以添加過渡爲filter

.title:hover div.tooltip{ 
    display: inline-block; 
    opacity: 0.5; 
} 

.title div.tooltip{ 
    display: inline-block; 
    opacity: 0; 
    -webkit-transition: opacity 1s ease-in-out; 
     -moz-transition: opacity 1s ease-in-out; 
     -ms-transition: opacity 1s ease-in-out; 
     -o-transition: opacity 1s ease-in-out; 
     transition: opacity 1s ease-in-out; 
} 

看到更新JsFiddle - 包括你完全CSS在評論中發現。