使用CSS转换内容

Question

我想更改div的内容，并且不希望它立即生效。 我希望文本在悬停时缓慢出现。

注意：想要一个纯CSS解决方案

HTML

<div></div>

CSS

div:after {
    content:"positive!";
    transition:content 2s;
}
div:hover:after {
    content:"negative!";
}

这是小提琴

Answer 1

您可以使用:before和:after ，例如：

div:before {
    position: absolute;
    left: 0;
    content:"positive!";
    opacity: 1;
    transition:2s;
}
div:after {
    position: absolute;
    left: 0;
    content:"negative!";
    opacity: 0;
    transition:2s;
}
div:hover:before {
    opacity: 0;
}
div:hover:after {
    opacity: 1;
}

DEMO