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

-3

我想在网站上放置一些文字，以便它在一段时间（比如2秒）的延时后改变颜色onmouseover并返回原始颜色onmouseout。在一段时间后更改字体颜色

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

来源

2012-04-16 green

纯CSS3的解决方案是可以接受的吗？ – fcalderan 2012-04-16 13:28:35

你有试过什么吗？ SO不是“给我编码”或“我可以这样做吗？”的地方。 SO不是谷歌。 – 2012-04-16 13:33:50

使用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); 
});

来源

2012-04-16 13:31:38 Kurt

添加onmouseout="timedFunction()"到你的文字，使用此功能：

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

来源

2012-04-16 13:32:10 Kappei

不要传递字符串到'setTimeout' – Quentin 2012-04-16 13:33:01

@Quentin为什么不呢？ – Kappei 2012-04-16 13:41:41

因为他们得到'eval'ed，这很慢，很难调试并且存在范围问题。 – Quentin 2012-04-16 13:44:30

-2

下面是使用setTimeout的工作示例;

css： .text { color：red; } .text.hover { color：yellow; }

的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：

来源

2012-04-16 13:43:20 Chango

为什么每半秒就要上课？一旦它消失了，它就消失了，除非明确地添加它，否则它不会回来......然后你必须清除间隔。这种方法效率低下，难以调试。 – Quentin 2012-04-16 13:46:22

是的，那是一个很大的错误，我改变了它。 – Chango 2012-04-16 15:10:53

这种功能应该由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; 
}

来源

2012-04-16 13:45:31 fcalderan

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

回答

相关问题