aspx中鼠标悬停时横向扩展DIV

Horizontally Expanding DIV on Mouse Over in aspx

本文关键字：横向 扩展 DIV 悬停 鼠标 aspx      更新时间：2023-09-26

我正在尝试这样做你可以在页面的右侧看到可折叠的DIV

这是我尝试过的，出于某种原因，我使用了这个的UserControl

<div class="widget-content">
<style type="text/css">
.w2bslikebox{background: url("/uploadedimages/_system/images/online-helpdesk.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 192px;padding: 0 5px 0 39px;width: 213px;z-index: 99999;position:fixed;right:-218px;top:30%;}
.w2bslikebox:hover{background: url("/uploadedimages/_system/images/online-helpdesk-ov.png") no-repeat scroll left center transparent !important;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 0px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: gray;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
.esn_searchTitle {
    color: #669613;
    font-size: 130%;
    font-weight: bold;
}
</style>
<div style="right: -218px;" class="w2bslikebox">
    <div id="Inner"> 
        <asp:Literal ID="ltlOnlineHelpdesk"  runat="server"></asp:Literal>
    </div>
</div>
</div>

我在codebehind中绑定Literal控件。问题是，DIV没有在鼠标悬停上扩展。

我错过了什么？或者还有其他最好的方法可以做到这一点，比如URL中显示的？

添加后，工作正常。。

<script type="text/javascript">
        //<!--
        $(document).ready(function () { $(".w2bslikebox").hover(function () { $(this).stop().animate({ right: "0" }, "medium"); }, function () { $(this).stop().animate({ right: "-225" }, "medium"); }, 500); });
        //-->
</script>
相关文章：