这是一款效果十分炫酷的jQuery和css3鼠标滑过背景模糊特效。在插件中使用了CSS3 transitions和使用jQuery来切换class。不是所有的浏览器都支持CSS3 transitions,最好使用Chrome或Safari浏览器来查看demo。
HTML
html结构十分简单:
<section class="ib-container" id="ib-container">
<article>
<header>
<h3><a href="#">Some Headline</a></h3>
<span>Some other text</span>
</header>
<p>Some introduction</p>
</article>
<article>
<!-- ... -->
</article>
<!-- ... -->
</section>
JAVASCRIPT
当我们用鼠标hover一篇文章,将使用jQuery给当前鼠标滑过的文章一个class active,而给其它文章一个class blur。
var $container = $('#ib-container'),
$articles = $container.children('article'),
timeout;
$articles.on( 'mouseenter', function( event ) {
var $article = $(this);
clearTimeout( timeout );
timeout = setTimeout( function() {
if( $article.hasClass('active') ) return false;
$articles.not($article).removeClass('active').addClass('blur');
$article.removeClass('blur').addClass('active');
}, 75 );
});
$container.on( 'mouseleave', function( event ) {
clearTimeout( timeout );
$articles.removeClass('active blur');
});
css代码请参考下载文件。






![MBTI 16型人格职业性格测试源码PC+H5自适应完整版基于ThinkPHP框架[亲测可用]](https://www.icbot.net/upload/portal/20250429/32ccad646f32a5f4926b3b7b5ef3232a.png)















