这是我的布局:
<div id="outerwrap">
<div id="innerwrap">
<div id="centerc">...</div>
<div id="rightc" style="font-weight:bold">
</div>
<div style="background-color:White;height:10px;top:284px;left:0px"></div>
<div id="leftc">..</div>
</div>
<div id="footer"">...</div>
#outerwrap
{
background-color: #EE44E7;
}
#innerwrap
{
background-color: #EE44E7;
margin-right: 200px;
top:0px;
height:100%;
}
#leftc
{
position: absolute;
top: 111px;
left: 0px;
width: 197px;
background-color: #EE44E7;
font-size: 10px;
}
#centerc
{
position: relative;
margin-left: 199px;
padding: 0px;
background-color: white;
}
#rightc
{
position: absolute;
top:111px;
right: 0px;
width: 199px;
color: blue;
background-color: #EE44E7;
font-size: 10px;
}
#footer
{
padding: 0px;
margin: 0px;
width: 100%;
height: 62px;
visibility: hidden;
}
这是我写的查询:
<script type="text/javascript">
$(document).ready(function() {
$("#leftc").hover(
function mouseover() {
$(this).css({ width: "190px" });
$("#centerc").css({ "margin-left": "195px" });
},
function mouseout() {
$(this).css({ width: "25px" });
$("#centerc").css({ "margin-left": "29px" });
}
);
});
</script>
我想要的是,当页面加载时,左边的div应该只是部分可见。现在,当用户将鼠标悬停时,左侧div(leftc)应扩展为190px。在悬停时,它应该返回到部分可见状态。
问题是leftc div还有一些图像和文本框,它们不会受到上面显示的代码的影响。它们的宽度保持不变?
div(leftc)中的控件类似于以下内容:
<div id="leftc">
<!-- Google Search Box Start -->
<div id="searchBox">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td> <input name="ctl00$q" type="text" value="Google Custom Search" maxlength="100" id="ctl00_q" onclick="ctl00$q.value=''" onfocus="this.className = 'highlight';" onblur="this.className = '';" style="border-color:#94C7EF;border-width:1px;border-style:solid;" /></td>
<td align="right">
<input type="image" name="ctl00$_btnSearch" id="ctl00__btnSearch" src="images/search.gif" alt="Search" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$_btnSearch", "", true, "SearchGroup", "", false, false))" style="border-width:0px;" />
</td>
<td width="5px" align="right">
<span id="ctl00__rfvQ" style="color:Red;visibility:hidden;"></span>
<input type="hidden" name="ctl00$cx" id="ctl00_cx" value="004354355454353138:kmy_68iupnm" />
<input type="hidden" name="ctl00$cof" id="ctl00_cof" value="FORID:11" /></td>
</tr>
</table>
</div>
<!-- Google Search Box End -->
<br /><br />
<div id="monthlabel">All this Month</div>
<div id="monthall">
<img id="ctl00_imgAuth" src="images/all/Jacor.jpg" style="border-width:0px;" /><br />
<div style="margin-top:2px;"><a href="http://www.xyz.com/AllMonth.aspx">Jacor Jul</a></div>
</div>
</div>
答案 0 :(得分:2)
您应该将左侧div的样式设置为:
overflow: hidden;
这样可以防止和包装或溢出。