Question

I have three radio button options:

• None
• Float Left
• Float Right

so when the user mouseover/hover over the radio button i just want to preview the div.

<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>

here is the div:

<div id="divid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non justo at est sodales molestie vitae id ligula. Proin sed consequat augue. Donec neque nibh, laoreet vel laoreet non, dignissim id lectus. Maecenas pulvinar pretium leo, quis pharetra odio pulvinar at. Integer tincidunt orci eget velit consectetur suscipit. Nullam in augue ut felis volutpat cursus. In mi augue, accumsan vel laoreet nec, scelerisque vitae nibh. Sed quis dolor quam, nec rhoncus lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras varius luctus nulla vel dapibus. Donec aliquam vehicula tincidunt. Suspendisse potenti. Donec at odio lorem. Nam aliquam rhoncus aliquam. Sed posuere tincidunt purus non tristique.
</div>

Answer 1

$('#<%= rbl.ClientID %>:radio').hover(
    function (){ 
        $('#divid').toggle();
    },
    function (){ 
        $('#divid').toggle();
    }
);

Working demo

demo using ui dialog

new demo seems to be trouble with closing dialog so I commented it out for now