javascript - 在aspx中鼠标悬停时水平扩展DIV

Question

我正在尝试做类似这样的事情您 可以在页面右侧看到可折叠的 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>

我在代码隐藏中绑定文字控件。问题是，DIV 没有在鼠标悬停时扩展。

我错过了什么？或者还有其他最好的方法，如 URL 中所示？

Answer 1

添加后，工作正常..

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