如何让toggleClass（“hover”）淡入？

Question

我一直在谷歌上搜索没有成功。当我将鼠标悬停在其上时，我希望我的页面的一部分可以淡入。

这是我的css：

.status .admin {
    display: none;
}   
.status.hover .admin {
    display: inline;
}

这是我的.coffee脚本：

$('.status').hover (event) ->
    $(this).toggleClass("hover")

Answer 1

对于这项任务，使用具有过渡不透明度的纯CSS是有意义的：

.status .admin {
    opacity: 0;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
}   
.status:hover .admin {
    display: inline;
    opacity: 1;
}

<div class="status">
    Status
    <span class="admin">Admin</span>
</div>

Answer 2

您可以尝试这样的CSS3：

.status .admin {
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
}

.status:hover .admin{
    opacity: 0.8;
}