I feel like this should work:

   $(".module .one").hover(function() {
     $("#viewport #one").addClass('red');
   });

Basically I am hiding all the .children of "#viewport on load, then when a seperate element is hovered, in this case .module .one I want to change something on the corresponding viewport ID #viewport #one.

Basic idea is a variable content window, where when a thumbnail or whatever I put in the modules swaps the content shown in the viewport. Something I am doing wrong?

Here is my full code:

<script type="text/javascript">
 $(document).ready(function() {
  $(".module .caption").hide();
  $("#viewport").children().hide();
  $(".module").hover(function() {
     $(this).find(".caption").slideDown().end().siblings('.module').addClass('under');
   },function() {
     $(this).find(".caption").slideUp().end().siblings('.module').removeClass('under');   
   });
   $(".module .one").hover(function() {
     $("#viewport #one").addClass('red');
   });
 });
</script>

The bigger hover function in the middle is for some fancy rollover effects that the modules will perform themselves, but for these purposes I just want to figure out why I can't add a Class to a separate element when another is hovered. Would love some help/advice!