在aspx中鼠标悬停时水平扩展DIV答案

【问题标题】：Horizontally Expanding DIV on Mouse Over in aspx在aspx中鼠标悬停时水平扩展DIV
【发布时间】：2012-09-06 06:51:19
【问题描述】：

我正在尝试做类似this 您可以在页面右侧看到可折叠的 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 中所示？

【问题讨论】：

请注意：我认为 div 只是在您的示例页面上移动'
你为什么用asp.net标记它？如果重要，请在后面添加代码。
@PaperThick 这是一个示例页面，我想在我的网站上这样做
是的，我明白，但我只是说，div 没有扩展，它的位置在变化
@PaperThick 我该如何解决？我的 div 没有改变位置

标签： javascript asp.net css html

【解决方案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>

【讨论】：