1.             <div>
2.                     <img class="one" src="hat.jpg">
3.                     <img class="two" src="coat.jpg">
4.                     <img class="three" src="children.jpg">
5.                     <img class="four" src="shirt.jpg">
6.                     <ul>
7.                         <a href="#"><li class="selector" id="one">Hats</li></a>
8.                         <a href="#"><li class="selector" id="two">Coats</li></a>
9.                         <a href="#"><li class="selector" id="three">Children</li></a>
10.                         <a href="#"><li class="selector" id="four">Shirts</li></a>
11.                     </ul>
12.                 </div>

...and this script changes the pics when li:hover:

1. <script>
           $(document).ready(function() {
           $(".selector").hover(function(){
           var id=$(this).attr("id");
           $("."+id).show(); },function(){
               var id=$(this).attr("id");
               $("."+id).hide();
               })
           });
       </script>
   
   
   
   
   
   
   
   
   
   

...but the last pic disappears when mouseover, and I want it to remain. How can I get it? Thanks in advance!