伪元素后的CSS（转换） - 如何转换在悬停时显示的内容

时间：2022-07-31 21:10:26
<!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?

我上面有这个示例代码。我正在尝试使用“过渡”这样的文字：' - 积极！'滑动/显示需要3秒钟。但它不起作用..如何解决？

1 个解决方案

#1

29  

after is not a valid value of transition.

after不是转换的有效值。

Instead put transition as a property of the :after selector.

而是将过渡作为：after选择器的属性。

HTML

HTML

<div>Test</div>

CSS

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;
}

Demo

演示

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

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;
}

Demo

演示

Here is a list of browsers that support transitions on pseudo elements: http://css-tricks.com/transitions-and-animations-on-css-generated-content/

以下是支持伪元素转换的浏览器列表：http：//css-tricks.com/transitions-and-animations-on-css-generated-content/

#1

29  

after is not a valid value of transition.

after不是转换的有效值。

Instead put transition as a property of the :after selector.

而是将过渡作为：after选择器的属性。

HTML

HTML

<div>Test</div>

CSS

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;
}

Demo

演示

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

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;
}

Demo

演示

Here is a list of browsers that support transitions on pseudo elements: http://css-tricks.com/transitions-and-animations-on-css-generated-content/

以下是支持伪元素转换的浏览器列表：http：//css-tricks.com/transitions-and-animations-on-css-generated-content/

标签：

相关文章