3

如何在悬停时使用 css 类和 jquery 使文本模糊。

<p>Text</p>

悬停时它应该变得模糊

4

3 回答 3

5

如果你想要一个纯 CSS 解决方案，那么你可以使用 CSS 来欺骗它text-shadow

Demo

p:hover {
   color: transparent;
   text-shadow: 0 0 2px rgba(0,0,0,0.7);
}

在这里，我使用rgbawherea代表alpha，它只不过是不透明度......如果你想平滑悬停效果，请使用 CSStransition属性。

p {
    -webkit-transition: all .5s;
    transition: all .5s;
}

p:hover {
   color: transparent;
   text-shadow: 0 0 2px rgba(0,0,0,0.7);
}

Demo 2

于 2013-05-07T09:09:19.007 回答
2

工作演示http://jsfiddle.net/cse_tushar/cx2UR/

HTML

<p id="para">Text</p>

CSS

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
body{
    font-size:20px;
}

jQuery

$(document).ready(function(){
    $('#para').hover(function(){
        $(this).addClass('blur');
    }).mouseout(function(){
        $(this).removeClass('blur');
    });
});

或仅使用 CSS

p:hover
{
color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
于 2013-05-07T09:17:46.283 回答
1

真正的 CSS 模糊怎么样？仅适用于 webkit 浏览器，但它是真正的交易。如果不支持，您可以使用 Alien 先生和 Palash Mondal 提供的备用方案

var blur;

if ('-webkit-filter' in document.body.style) {
    blur = 'filter';    
} else {
    blur = 'shadow';
}

$(document).ready(function(){
    $('#text').hover(function(){
        $(this).addClass(blur);
    }).mouseout(function(){
        $(this).removeClass(blur);
    });
});

如果不支持 CSS 过滤器，则编辑代码以添加回退。它不是由 jQuery 悬停（不是我的首选）触发的，而是回退到 Mr. Alien 文本阴影。

http://jsfiddle.net/buvMF/2/

于 2013-05-07T09:15:21.767 回答