如何在悬停时使用css类和jquery使文本模糊。
<p>Text</p>
悬停时应该变得模糊
答案 0 :(得分:5)
如果你想要一个纯CSS解决方案,你可以使用CSS text-shadow
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);
}
答案 1 :(得分:2)
工作演示http://jsfiddle.net/cse_tushar/cx2UR/
<p id="para">Text</p>
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
body{
font-size:20px;
}
$(document).ready(function(){
$('#para').hover(function(){
$(this).addClass('blur');
}).mouseout(function(){
$(this).removeClass('blur');
});
});
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/ 强>