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

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

1 个答案: