问在jQuery中链接悬停时文本模糊吗？
EN

Stack Overflow用户

提问于 2012-07-25 23:00:34

回答 1查看 644关注 0票数 0

我想创建一个模糊的效果，将持续例如500毫秒，然后它回到正常的一些动画，将持续例如250毫秒。因此，如果用户将鼠标悬停在链接上，它将在此链接文本上显示模糊/模糊效果，然后恢复正常。

假设我有这样的代码：

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

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

javascript

jquery

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-07-25 23:20:44

您可以尝试如下所示：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/11652691

复制

相似问题

问在jQuery中链接悬停时文本模糊吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jQuery中链接悬停时文本模糊吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在jQuery中链接悬停时文本模糊吗？
EN