Question

我的跨度设置为opacity : 0，当用户将鼠标悬停在其上时会显示它，但问题是我想快速显示它并缓慢地再次隐藏它。

.mySpan {
    opacity: 0;
    font-size: 12px;
    background: red;
    border-radius: 5px;
    color:#fff;
    transition: opacity cubic-bezier(0, 0.52, 1, 1) 0.3s
}

.mySpan:hover{
    opacity: 1
}

Answer 1

覆盖悬停时的过渡时间：

.mySpan {
    opacity: 0.1;
    font-size: 12px;
    background: red;
    border-radius: 5px;
    color:#fff;
    transition: opacity cubic-bezier(0, 0.52, 1, 1) 1s;
}

.mySpan:hover{
    opacity: 1;
    transition-duration: 200ms;
}

<span class="mySpan">Hello</span>

悬停时，持续时间为200ms时显示的很快，但是当您停止悬停时，它会恢复为1s并缓慢地隐藏。

Answer 2

您可以在transition上添加不同的hover值：

.mySpan {
    opacity: 0;
    font-size: 12px;
    background: red;
    border-radius: 5px;
    color:#fff;
    transition: 1s;
    padding:10px;
}

.mySpan:hover{
    opacity: 1;
    transition:0s;
}

<span class="mySpan">test</span>

如何使用CSS转换快速显示和隐藏缓慢

2 个答案: