jquery - how to show div based on hover over radio button -

update question:

   <asp:radiobuttonlist runat="server" id="rbl" repeatdirection="horizontal">         <asp:listitem text="none" value="0" selected="true" enabled="true"/>         <asp:listitem text="float left" value="1" selected="false" enabled="true"/>         <asp:listitem text="float right" value="2" selected="false" enabled="true"/>     </asp:radiobuttonlist>  <div id="divid0">0</div> <div id="divid1">1</div> <div id="divid2">2</div>  <script language="javascript" type="text/javascript">          $(document).ready(function () {          $('#divid0').dialog({             autoopen: false,         });         $('#divid1').dialog({             autoopen: false,         });         $('#divid2').dialog({             autoopen: false,         });                    $('#rbl_0 :radio').hover(          function() {             $('#divid0').dialog('open');         }, function() {             //$('#divid0').dialog('close');         });           $('#rbl_1 :radio').hover(          function() {             $('#divid1').dialog('open');         }, function() {             //$('#divid1').dialog('close');         });           $('#rbl_2 :radio').hover(          function() {             $('#divid2').dialog('open');         }, function() {             //$('#divid2').dialog('close');         });      });    </script> 

i have 3 radio buttons , 3 divs

if user hover on radio button 1 show div 1 , if hover on radio button 2 show div 2 etc....

but somehow above code not work when try help?

my guess radio button selector wrong. works:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>  <input type="radio" id="rbl_0" /> <input type="radio" id="rbl_1" /> <input type="radio" id="rbl_2" />  <div id="divid0">0</div> <div id="divid1">1</div> <div id="divid2">2</div>  <script language="javascript" type="text/javascript"> $(document).ready(function () {   $("div").hide();   $('#rbl_0').hover(   function() {       $('#divid0').show();   }, function() {       $('#divid0').hide();   });   $('#rbl_1').hover(   function() {       $('#divid1').show();   }, function() {       $('#divid1').hide();   });   $('#rbl_2').hover(   function() {       $('#divid2').show();   }, function() {       $('#divid2').hide();   }); }); </script> 

edit: based on updated question, works:

<asp:radiobuttonlist runat="server" id="rbl" repeatdirection="horizontal">     <asp:listitem text="none" value="0" selected="true" enabled="true" />     <asp:listitem text="float left" value="1" selected="false" enabled="true" />     <asp:listitem text="float right" value="2" selected="false" enabled="true" /> </asp:radiobuttonlist> <div id="divid0">0</div> <div id="divid1">1</div> <div id="divid2">2</div>  <script language="javascript" type="text/javascript"> $(document).ready(function () {     $("div").hide();     $('#<%= rbl.clientid %> input').each(function () {         if ($(this).attr("checked")) {             $("#divid" + $(this).val()).show();         }         $(this).click(function () {             $("div").hide();             $("#divid" + $(this).val()).show();         });     }); }); </script>