1

我制作了自定义工具提示，在应用任何 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>
4

1 回答 1

0

删除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。

于 2013-10-22T17:54:35.270 回答