jQuery：在另一个元素的鼠标悬停时更改某些类

<ul>
<li class=\"n1\">Understand key issues relating to creating animations for interactive media products</li>
<li class=\"n2\">Understand key contextual information relating to creating 2D animations for interactive media products</li>
<li class=\"n3\">Be able to create 2D animations for use as part of an interactive media product</li>
<li class=\"n4\">Be able to liaise with relevant parties</li>
<li class=\"n5\">Be able to store 2D animations for use as part of an interactive media product</li>
</ul>
<hr />
<a href=\"alcohol_calculator.php\" class=\"swfselector\">
&raquo; Alcohol unit calculator prototype <img class=\"tab\" src=\"/images/1.png\" width=\"30\" height=\"28\" alt=\"1\" /> <img class=\"tab\" src=\"/images/2.png\" width=\"30\" height=\"28\" alt=\"2\" /><img class=\"tab\" src=\"/images/3.png\" width=\"30\" height=\"28\" alt=\"3\" /> <img class=\"tab\" src=\"/images/5.png\" width=\"30\" height=\"28\" alt=\"5\" />
</a>
<a href=\"bouncing_ball.php\" class=\"swfselector\">
&raquo; Bouncing ball animation <img class=\"tab\" src=\"/images/3.png\" width=\"30\" height=\"28\" alt=\"3\" />
</a>
<a href=\"FOCC_mnemonic.php\" class=\"swfselector\">
&raquo; FOCC mnemonic <img class=\"tab\" src=\"/images/1.png\" width=\"30\" height=\"28\" alt=\"1\" /> <img class=\"tab\" src=\"/images/2.png\" width=\"30\" height=\"28\" alt=\"2\" /> <img class=\"tab\" src=\"/images/3.png\" width=\"30\" height=\"28\" alt=\"3\" /> <img class=\"tab\" src=\"/images/5.png\" width=\"30\" height=\"28\" alt=\"5\" />
</a>
<a href=\"information_literacy_quiz.php\" class=\"swfselector\">
&raquo; Information literacy quiz <img class=\"tab\" src=\"/images/1.png\" width=\"30\" height=\"28\" alt=\"1\" /> <img class=\"tab\" src=\"/images/2.png\" width=\"30\" height=\"28\" alt=\"2\" /> <img class=\"tab\" src=\"/images/3.png\" width=\"30\" height=\"28\" alt=\"3\" /> <img class=\"tab\" src=\"/images/5.png\" width=\"30\" height=\"28\" alt=\"5\" />
</a>
<a href=\"traffic_lights.php\" class=\"swfselector\">
&raquo; Traffic lights <img class=\"tab\" src=\"/images/1.png\" width=\"30\" height=\"28\" alt=\"1\" /> <img class=\"tab\" src=\"/images/2.png\" width=\"30\" height=\"28\" alt=\"2\" /> <img class=\"tab\" src=\"/images/3.png\" width=\"30\" height=\"28\" alt=\"3\" /> <img class=\"tab\" src=\"/images/5.png\" width=\"30\" height=\"28\" alt=\"5\" />
</a>

    $(document).ready(function() {
 $(\'.swfselector\').find(\'.tab\').each(function() {
                $(this).attr(\"src\", 
                $(this).attr(\"src\").replace(\".png\", \"o.png\"));  
             })  
});
$(\'.swfselector\').live(\'mouseover mouseout\', function(event) {
  if (event.type == \'mouseover\') {
            $(this).find(\'.tab\').each(function() {
                $(this).attr(\"src\", 
                $(this).attr(\"src\").replace(\"o.png\", \".png\"));  

             })
   } else {
             $(this).find(\'.tab\').each(function() {
                $(this).attr(\"src\", 
                $(this).attr(\"src\").replace(\".png\", \"o.png\"));  
             })
         }
    });

$(document).ready(function() {
 $(\'.swfselector\').find(\'.tab\').each(function() {
                $(this).attr(\"src\", 
                $(this).attr(\"src\").replace(\".png\", \"o.png\"));  
             })  
});
$(\'.swfselector\').live(\'mouseover mouseout\', function(event) {
  if (event.type == \'mouseover\') {
            $(this).find(\'.tab\').each(function() {
                $(this).attr(\"src\", 
            $(this).attr(\"src\").replace(\"o.png\", \".png\"));  
            var srcString =  $(this).attr(\"src\").substr(0, $(this).attr(\"src\").length - 4);
            nameString =  srcString.substr(8, srcString.length - 1);
            $(this).closest(\'ul\').find(\'li\').each(function() {
            var className = $(this).attr(\'class\');
              if (nameString.indexOf(className)) {
                  $(this).removeClass(className).addClass(className + \'o\');
                  }
                })
             })
   } else {
             $(this).find(\'.tab\').each(function() {
                $(this).attr(\"src\", 
                $(this).attr(\"src\").replace(\".png\", \"o.png\"));  
             })
         }
    });