Jquery 高亮显示文本中重要的关键字

　　<div class="wrapper">

　　<ul class="entity-results">

　　<li><a class="d1" href="#">Summary</a></li>

　　<li><a class="d2" href="#">Avatar</a></li>

　　<li><a class="d3" href="#">Formats</a></li>

　　</ul>

　　<div class="content">

　　<h2>

　　Avatar (2009 film)</h2>

　　<div class="entity-source">

　　<img src="images/avatar.jpg" alt="Avatar poster" />

　　<p>

　　Avatar, also known as James Cameron's Avatar, is an American 3-D science fiction

　　epic film written and directed by <a href="http://en.wikipedia.org/wiki/James_Cameron">

　　James Cameron</a>, and was released on December 16, 2009 by 20th Century Fox.

　　The film is co-produced by <a href="http://en.wikipedia.org/wiki/Lightstorm_Entertainment">

　　Lightstorm Entertainment</a>, and <span class="d1">focuses on an epic conflict on Pandora</span>,

　　an inhabited Earth-sized moon of Polyphemus, one of three fictional gas giants orbiting

　　<a href="http://en.wikipedia.org/wiki/Alpha_Centauri_A">Alpha Centauri A</a>. On

　　Pandora, human colonists and the sentient humanoid indigenous inhabitants of Pandora,

　　the Na'vi, engage in a war over the planet's resources and the latter's continued

　　existence. The film's title refers to <span class="d2">an avatar, a representation of

　　a real person in a virtual world</span>.</p>

　　<p>

　　<span class="d3">The film was released in 2D and 3D formats</span>, along with an

　　IMAX 3D release in selected theaters. The film is being touted as a breakthrough

　　in terms of filmmaking technology, for its development of 3D viewing and stereoscopic

　　filmmaking with cameras that were specially designed for the film's production.</p>

　　<p>

　　Read the rest of the <a href="http://en.wikipedia.org/wiki/Avatar_(2009_film)">original

　　Wikipedia page about Avatar</a></p>

　　<div class="mask">

　　</div>

　　</div>

　　</div>

　　</div>

　　.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;

　　}

　　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');

　　});

　　});