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)完全覆盖不透明度过渡并向右跳到opacity = 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。

CSS3自定义工具提示淡入淡出

1 个答案: