Question

所以我为竞赛创建了网站，并希望每当用户将鼠标悬停在此链接上，然后文本发生变化，我已经实现了文本更改，但现在想要添加过渡到它，请帮助我。

按方式我只用css来改变代码，

#link:before 
{
position:fixed;  
left:52%; 
content:"I am feeling lucky"; 
transition:content 1s;
}

#link:hover:before 
{
position:fixed; 
text-decoration:none; 
left:52%; 
color:#666; 
content:"Wrong Decision";
}

过渡：内容1s;没有效果请帮我解释一下代码。

Answer 1

您无法有效更改content，但可以:after使用:before，并在悬停时显示/隐藏它。

#link:before,
#link:after{
    position:fixed;
    text-decoration: none;
    left:52%; 
    content:"I am feeling lucky"; 
    transition:content 1s;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}
#link:after{
    content:"Wrong Decision";
    opacity: 0;
    color:#666;
}
#link:hover:before{opacity: 0;}
#link:hover:after{opacity: 1;}

DEMO

如何使用css添加到内容的转换

1 个答案: