伪元素之后的CSS(转换) - 如何转换在悬停上显示的内容 [英] CSS (transition) after a pseudo element - how to transition content that shows on hover
问题描述
<!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
< pre class =lang-css prettyprint-override>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>
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;
}
You 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.
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;
}
Here is a list of browsers that support transitions on pseudo elements: http://css-tricks.com/transitions-and-animations-on-css-generated-content/
这篇关于伪元素之后的CSS(转换) - 如何转换在悬停上显示的内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!