开发者

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();   
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜