popup div when hover over radio button
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"&开发者_如何学JAVAgt;
<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>
$('#<%= 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
Is this what you're after?
$("input[name='<%= rbl.ClientID %>']").hover(
function() { $("#divid").toggle(); }
);
Something along these lines: Demo.
Does this fulfill your requirement?
$(":radio[name='rbl']").hover(function(){
$("#divid").css({
display: "block",
position: "absolute",
left: ($(this).offset().left + $(this).width()) + "px",
top: $(this).offset().top + "px"
});
},
function(){
$("#divid").hide();
});
精彩评论