javascript - 如何使 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>