값 변경시 CSS 전환 지연

Question

다음과 같이 질문하십시오.

유효성 검사 "확인"텍스트 문자열을 기다리는 빈 SPAN 값이 있습니다. 텍스트 문자열은 2 ~ 2 초 후 (사용자 상호 작용없이) 자동으로 사라져야합니다. 순수한 CSS로 어떻게 이것을 할 수 있습니까?

호버처럼 사용자가 시작한 트리거가 없기 때문에 정확한 텍스트 문자열 값을 기반으로 규칙을 설정하는 것이 가장 좋습니까? 융통성이없는 것 같습니다. 두 번째 또는 두 개의 지연이 시작될 때 어떻게 설정합니까? 당신의 도움에 대한

이 작업에 심하지 않습니다 ...

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

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

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

감사합니다.

- UPDATE--

위의 규칙은 실제로 작동합니다. 그러나 그 값은 채워진 후 변경되지 않으므로 한 번만. 특정 값이 아닌 변경시 트리거 할 일반 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;} 

다시 '가 포함 된 상자가 확인 '로드시에는 호버에서 disapper가되지만'confirmed '가 입력 된 빈 상자는 여전히 사라지지 않습니다.