query高亮效果之Jquery实现文章内容关键字高亮显示

.entity-source, .entity-source span.show
{
    position: relative;
}
.entity-source .mask
{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.entity-source span
{
    z-index: 2;
}
.entity-source span.show
{
    background: #ffc;
    color: #000;

}

   类mask中的z-index:1 使得<div class=”mask”> 覆盖在左边文字内容之上。
   z-nidex：2又使得span段落覆盖在<div class=”mask”>之上。从而显示实现了段落文字高亮显示。

jQuery(document).ready(function($) {
    // mask source 控制mask的动画效果
    var maskSource = jQuery('.mask');
    jQuery('.entity-results').hover(function() {
        maskSource.animate({opacity:0.7},1).fadeIn('750');
    }, function() {
        maskSource.fadeOut('1000');
    });
 
    // match hover 控制段落的高亮显示
    var sample1 = jQuery('span.d1');
    var sample2 = jQuery('span.d2');
    var sample3 = jQuery('span.d3');
    jQuery('a.d1').hover(function() {
        sample1.addClass('show');   //给段落添加类
    }, function() {
        sample1.removeClass('show'); //移除段落类
    });
    jQuery('a.d2').hover(function() {
        sample2.addClass('show');
    }, function() {
        sample2.removeClass('show');
    });
    jQuery('a.d3').hover(function() {
        sample3.addClass('show');
    }, function() {
        sample3.removeClass('show');
    });
});