how to set a mouseover effect using jQuery?

I'd like to do a simple toggle for mouseovers. I've 4 thumbnail images, wrapped inside of links, and then one big DIV where a larger image can appear. The large image should depend on the last thumbnail that is mousedover. Of the 4 links, each is to have a border, when it has been chosen (that is mousedover). We are using text-decoration for the border. I'm trying this code:

jQuery(document).ready(function() {
  $(".view-thumb img").mouseover(function() {
   // get rid of the text decoration on all 4 thumbnails
   $(".view-thumb").css("text-decoration", "none");
   
   // now reapply the text-decoration to this particular link
    this.parentNode.style.textDecoration = "underline";
alert(this.parentNode.id);
  });
});

The alert() gets the id of the link, and when I look at in the browser, I can see that the code is correctly finding the link. Therefore, it seems to be I should be able to set its text decoration. I know I've got the right node because I've seen the id in that alert().



This doesn't seem to work at all. This seems to have no effect on the textdecoration of the element. The CSS style sheet is causing the link to have text-decoration on hover, but we want more than hover - if you mouseout of one thumbnail, but you don't mouse over another thumbnail, you'r last thumbnail should contiue to have text decoration.

What am I doing wrong?


These are some additional notes:


// this bit of CSS:
//
//          a:hover{
//                  text-decoration:underline;
//          }
//
// which is on line 16 of styles.css, causes a border to
// appear around the 4 small thumbnails that are underneath
// the main product image on the page. We need to make this
// border permanent, rather than merely onhover.
//

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

The HTML of the 4 thumbnails: 
 
<div id="prod-views">
       	<a id="view-1" class="view-thumb" href=""><img src="products-2_files/example-prod-view.gif" alt=""></a>
    <a id="view-2" class="view-thumb" href=""><img src="products-2_files/example-prod-view.gif" alt=""></a>
   <a id="view-3" class="view-thumb" href=""><img src="products-2_files/example-prod-view.gif" alt=""></a>
    <a id="view-4" class="view-thumb" href=""><img src="products-2_files/example-prod-view.gif" alt=""></a>
</div>
 
 
My jQuery code:
 
 
 
 
jQuery(document).ready(function() {
  $(".view-thumb img").mouseover(function() {
   // get rid of the text decoration on all 4 thumbnails
   $(".view-thumb").css("text-decoration", "none");
   
   // now reapply the text-decoration to this particular link
    this.parentNode.style.textDecoration = "underline";
alert(this.parentNode.id);
  });
});