![transition]( "transition")
本文介绍了伪元素之后的CSS（转换） - 如何转换在悬停上显示的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 <！DOCTYPE html> < html> < head> < style> div { transition：after 3s; -webkit-transition：after 3s; } div：hover：after { content： - positive！ } < / style> < / head> < body> < div> Test< / div> < / body> < / html> 我试图使用'transition'，以便文本：' - 积极！'需要3秒钟滑动/显示。但是它不工作..如何解决它？解决方案 之后不是 transition 的有效值。 而不是转换作为的属性： selector。 HTML < div> Test< / div> CSS div：after { content： - positive！ position：relative; opacity：0; top：-20px; -webkit-transition：all 3s; transition：all 3s; } div：hover：after { opacity：1; top：0px; } 演示 您也可以在悬停时悬停并悬停状态。这允许我们延迟显示伪元素，但没有延迟隐藏它。 CSS div：after { content： - positive！ position：relative; opacity：0; top：-20px; -webkit-transition：all 250ms; transition：all 250ms; } div：hover：after { opacity：1; top：0px; -webkit-transition：all 3s; transition：all 3s; } 演示 以下是支持伪元素转换的浏览器列表： http://css-tricks.com/transitions-and-animations-on-css-generated- content / <!DOCTYPE html><html><head><style> div{transition:after 3s;-webkit-transition:after 3s;}div:hover:after{content:"- positive!";}</style></head><body><div>Test</div></body></html>I have this sample code above. I'm trying to use 'transition' so that the text: '- positive!' takes 3 seconds to slide/show up. But it isn't working.. How to fix it? 解决方案 after is not a valid value of transition. Instead put transition as a property of the :after selector.HTML<div>Test</div>CSSdiv:after { content:" - positive!"; position: relative; opacity: 0; top: -20px; -webkit-transition: all 3s; transition: all 3s;}div:hover:after { opacity: 1; top: 0px;}DemoYou can also have a different transition on the hover in and hover out state. This allows us to have a delay to show the pseudo-element but no delay to hide it.CSSdiv:after { content:" - positive!"; position: relative; opacity: 0; top: -20px; -webkit-transition: all 250ms; transition: all 250ms;}div:hover:after { opacity: 1; top: 0px; -webkit-transition: all 3s; transition: all 3s;}DemoHere is a list of browsers that support transitions on pseudo elements: http://css-tricks.com/transitions-and-animations-on-css-generated-content/ 这篇关于伪元素之后的CSS（转换） - 如何转换在悬停上显示的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 10-21 00:25