javascript - jQuery中链接悬停上的模糊文本？

Question

我想创建一个模糊效果，持续时间为 500 毫秒，然后在某些动画中恢复正常，持续时间为 250 毫秒。因此，如果用户将鼠标悬停在链接上，它将对该链接文本产生模糊/模糊效果，然后恢复正常。

假设我有这个代码：

<a class="link-to-blurry" href="http://example.com">Text to blurry on hover</a>

这可以使用 jQuery 或一些额外的 JavaScript 插件来完成吗？

Answer 1

你可以尝试这样的事情：

CSS：

a, a:hover {
    color: black;
    font-size: 1.5em;
    text-decoration: none;      
}

.on {
    transition: text-shadow 500ms;
    -webkit-transition: text-shadow 500ms;
    -moz-transition: text-shadow 500ms;
    -ms-transition: text-shadow 500ms;
    -o-transition: text-shadow 500ms;
    text-shadow: 0 0 10px #000;
}

.off {
    transition: text-shadow 250ms;
    -webkit-transition: text-shadow 250ms;
    -moz-transition: text-shadow 250ms;
    -ms-transition: text-shadow 250ms;
    -o-transition: text-shadow 250ms;
    text-shadow: 0;
}

JS：

$('a').hover(function(){
    $(this).removeClass('off').addClass('on');
}, function(){
    $(this).removeClass('on').addClass('off');
});