Swapping content in a seperate div on hover

Question

I feel like this should work:

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

Basically I am hiding all the .children of "#viewport on load (which #one is), then when a separate element is hovered, (in this case .module .one) I want to change something in #viewport, specifically #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 JS:

<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() {
     $("#one").addClass('red');
   });
 });
</script>

Here is the markup:

<div id="viewport">
  <div id="one">FIRST ONE CONTENT</div><!-- end #one -->
  <div id="two">SECOND ONE CONTENT</div><!-- end #two -->
  <div id="three">THIRD ONE CONTENT</div><!-- end #three -->
  <div id="four">FOURTH ONE CONTENT</div><!-- end #four -->
</div><!-- end #viewport -->

    <div class="module span-1 one">
  <div class="inside">HOVER</div><!-- end .inside -->
    <h1>TITLE</h1>
    <div class="caption down">
      <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
    </div><!-- end .caption -->
</div><!-- end .module -->

    <div class="module span-1 two">
  <div class="inside">HOVER</div><!-- end .inside -->
    <h1>TITLE</h1>
    <div class="caption down">
      <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
    </div><!-- end .caption -->
</div><!-- end .module -->

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!

Answer 1

$("#viewport #one").addClass('red'); references a control with two names? Should this be;

$(".viewport .one").addClass('red');?

edit

I just tried this and it worked;

$(".viewport.one").addClass('red');

You need to remove the space between the two classes.

Answer 2

Do you mean:

 $(".module.one").hover(function() {

If the classes are both on the same dom element, there should be no space between them. A space between the classes would imply that the first is the parent and the second is its child.