Question

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

可以使用JavaScript吗？

Answer 1

使用jQuery，你可以做这样的事情（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

此类功能应由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/

在一段时间后更改字体颜色

4 个答案: