html - 使用 css 转换内容

Question

我想更改一个 div 的内容，但不希望它立即生效。我希望文本在悬停时缓慢进入。

注意:需要一个纯 CSS 解决方案

HTML

<div></div>

CSS

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

这是 fiddle

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