toggle divs when hovered?

update:

#div1 img   { float: left; clear: left; margin: 10px; }    
#div2 img  { float: right; clear: right; margin: 10px; }

i have three divs and three radiobuttons rb1, rb2, rb3 and divs div1, div2, div3

when the user hover over the radiobutton1 then displays div1 ... radiobutton2 then displays div2 etc...

the below code works fine.

my question is:

how can i use a single <div> containing the text and images (instead of t开发者_开发知识库hree copies) and simply apply a CSS style to it depending on which radio button is hovered.?

<div id="div1">      
<img class="align-left" src="image.gif" /> 
some test.....div1
</div>

<div id="div2">      
<img class="align-right" src="image.gif" /> 
some test.....div2
</div>    

<div id="div3">      
<img class="align-left" src="image.gif" /> 
<img class="align-right" src="image1.gif" /> 
some test.....div3
</div>


$('#_rbl').hover(              
    function (){         
     $('#div1').dialog('open');     
});

$('#_rb2').hover(              
    function (){         
     $('#div2').dialog('open');     
});

$('#_rb3').hover(              
    function (){         
     $('#div3').dialog('open');     
});

How about:

<div id="theDiv">      
<img class="align-left" src="image.gif" /> 
some test.....div1
</div>

$('#_rbl').hover(              
    function (){         
     $('#theDiv').removeClass("rb1 rb2 rb3").addClass("rb1").dialog('open');
});

$('#_rb2').hover(              
    function (){         
     $('#theDiv').removeClass("rb1 rb2 rb3").addClass("rb2").dialog('open');     
});

$('#_rb3').hover(              
    function (){         
     $('#theDiv').removeClass("rb1 rb2 rb3").addClass("rb3").dialog('open');     
});

UPDATE (create the classes like so):

.rb1 img { float: left; clear: left; margin: 10px; }    
.rb2 img { float: right; clear: right; margin: 10px; }

1. Use one div
2. update your hover function to
   1. remove existing classes usign $('#divID').removeAttr("style")
   2. add new class using $('#divID').addClass("rb1/2/3")
   3. display the div

There are a few things you could do, but here is a solution without taking into account any patterns.

<div id="divMain"></div>

$('input[type=radio]').hover(function() {
    if ($(this).attr('id') == "_rb1") {
        $('#divMain').html('<img class="align-left" src="image.gif" />some test.....div1').dialog('open');  ;
    } else if ($(this).attr('id') == "_rb2") {  
        $('#divMain').html('<img class="align-right" src="image.gif" />some test.....div2').dialog('open');  ;
    } else if ($(this).attr('id') == "_rb3") {  
        $('#divMain').html('<img class="align-right" src="image.gif" /><img class="align-right" src="image.gif" />some test.....div3').dialog('open');
    }
});

If there is a pattern, please define more clearly. We could use CSS to define a class for the div that decides what classes to show as well.