javascript - 在一定时间后更改字体颜色

Question

我想在网站上放一些文本，这样它会在一些（比如 2 秒）时间延迟后改变颜色 onmouseover 并返回到原始颜色 onmouseout。

是否可以使用 JavaScript 来做到这一点？

Answer 1

使用 jQuery，您可以执行以下操作（此处为 JSFiddle ）

HTML：

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

JS：

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

编辑：完整的 JSFiddle 示例在这里

JS：

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

​</p>

Answer 2

此类功能应由 CSS3 提供（如果可用），而不涉及 setTimeout 或其他类型的 javascript。因此，假设您将为 IE 选择以前提出的 Javascript 解决方案之一，只需将此 CSS 用于其他所有现代浏览器

html/css

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

Answer 3

使用此功能添加onmouseout="timedFunction()"到您的文本中：

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

Answer 4

这是一个使用 setTimeout 的工作示例；

css：.text { 颜色：红色；} .text.hover { 颜色：黄色；}

javascript:

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：http: //jsfiddle.net/9TJfD/8/