在悬停时使用CSS和jQuery模糊文本

时间:2013-05-07 09:07:18

标签: jquery css css3

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

<p>Text</p>

悬停时应该变得模糊

3 个答案:

答案 0 :(得分:5)

如果你想要一个纯CSS解决方案,你可以使用CSS text-shadow

来欺骗它

Demo

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

在这里,我使用rgba a代表 alpha ,这只不过是不透明......如果你想平滑悬停的效果,使用CSS transition属性。

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

答案 1 :(得分: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);
}

答案 2 :(得分: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悬停(不是我的第一选择)触发而且是对Alien文本阴影的回落。

<强> http://jsfiddle.net/buvMF/2/