Question

我有三个单选按钮选项：

无
向左浮动
Float Right

所以当用户将鼠标悬停/悬停在单选按钮上时，我只想预览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>

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

这就是你要追求的吗？

$("input[name='<%= rbl.ClientID %>']").hover(
       function() { $("#divid").toggle(); }
);

这些内容：Demo。

Answer 2

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

Working demo

demo using ui dialog

new demo似乎在关闭对话框时出现问题，所以我暂时将其评论

Answer 3

这是否符合您的要求？

$(":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();   
});

将鼠标悬停在单选按钮上时弹出窗口div

3 个答案: