Question

嘲笑我：

我有一个空的SPAN值，等待验证“已确认”的文本字符串。文本字符串需要在一两秒后自动消失（无需用户交互）。如何用纯CSS完成？

由于没有用户启动的触发器，例如：悬停，是否最好根据确切的文本字符串值设置规则？似乎不灵活。如何设置第二个或两个延迟开始时间？

这不起作用......

<span class="validationTextString" value=""></span>

.validationTextString[value=""]
{opacity: 1.0;
transition: opacity 0.3s linear 2s;}

.validationTextString[value="confirmed"]
{opacity: 0.0;}

感谢您的帮助。

- UPDATE -

上述规则实际上是有效的。但只有ONCE - 因为在填充后值不会改变。是否有一个通用的CSS值来触发更改而不是特定的值？或者是一种在触发后重置规则的方法？

再次感谢。

Answer 1

在我看来，纯CSS无法实现这一点。这是因为css仅在加载时调用，因此无法检查该值是否已“确认”。看到此fiddle，加载时包含“已确认”的文本框消失，但另一个则没有，即使您输入“已确认”。

另外，你需要'$'这样的标志：

.validationTextString[value$=""]
{opacity: 1.0;
transition: opacity 0.3s linear 2s;}

不幸的是，使用:hover或:active时这也不起作用：

.validationTextString:hover[value$=""]
    {opacity: 1.0;
    transition: opacity 0.3s linear 2s;}

再次在加载时包含“已确认”的框将在悬停时消失，但输入“已确认”的空白框仍然不会消失。

CSS转换延迟价值变化

1 个答案: