2

猜我这个：

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

由于没有像 :hover 这样的用户启动触发器，最好根据确切的文本字符串值设置规则吗？显得不灵活。你如何设置第二个或两个延迟开始的时间？

这似乎不起作用......

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

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

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

谢谢你的帮助。

- 更新 -

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

再次感谢。

4

1 回答 1

0

在我看来，这对于纯 CSS 来说是不可能的。这是因为 css 仅在加载时调用，因此无法检查该值现在是否已“确认”。看到这个小提琴，在加载时包含“确认”的文本框消失了，但另一个没有，即使你输入了“确认”。

此外，您需要像这样的“$”符号：

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

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

于 2013-07-25T15:47:58.260 回答