특정 시간이 지난 후 글꼴 색상 변경

Question

웹 사이트에 텍스트를 삽입하여 색상을 변경하고 일부 색상 (예 : 2 초) 후에 원래 색상으로 되돌립니다.

JavaScript를 사용하여 가능합니까?

jQuery를이 같은 작업을 수행 할 수 있습니다와

Answer 1

(JSFiddle here)

HTML :

<a id='v1'>Hello</a>​ 

JS :

​setTimeout(function() { 
    $('#v1').css('color','#777'); 
}​,2000);​ 

편집 : 전체 JSFiddle 예 here

JS :

$('#v1').hover(function() { 
    $(this).css('color','#777'); 
}, function() { 
    setTimeout(function() { 
     $('#v1').css('color','#000'); 
    },2000); 
}); 

Answer 2

이 기능을 사용하여 텍스트에 onmouseout="timedFunction()"를 추가

여기

function timedFunction{  
    var timeout = setTimeout("changeColor()",timeInMilliseconds); 
} 

Answer 3

가의 setTimeout을 사용하여 동작하는 예제입니다;

css : . 텍스트 { color : red; } .text.hover { 색상 : 노란색; }

자바 스크립트 : 여기

var timeoutId = null; 
$(".text").hover(function() { 
    if (timeoutId != null) { 
     clearTimeout(timeoutId); 
     timeoutId = null; 
    } 
    $(this).addClass("hover"); 
}, function() { 
    var $element = $(this); 
    timeoutId = setTimeout(function() { 
     $element.removeClass("hover"); 
    }, 500); 
});​ 

그리고는 jsfiddle입니다 :

Answer 4

기능의이 종류는 CSS3에서 제공되어야 가능한 경우,의 setTimeout의 또는 자바 스크립트의 다른 종류를 포함하지 않고. 그래서, 당신은 IE에 대한 이전의 제안 자바 스크립트 솔루션 중 하나를 선택합니다 가정, 단순히 순수 CSS3 솔루션은 당신을 위해 허용

<span>hover me</span> 

span { 
    color : green; 
    -webkit-transition : color 2s linear; 
    -msie-transition : color 2s linear; 
    -moz-transition : color 2s linear; 
    -o-transition : color 2s linear; 
    transition : color 2s linear; 
} 

span:hover { 
    color : red; 
}