jQuery的操纵DIV而不是它的子元素

Question

这是我的布局：

 <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（leftc）应该展开为190px。悬停时，它应该返回到部分可见状态。

问题是leftc div里面还有一些图像和文本框，它们不受上面显示的代码的影响。它们保持相同的宽度？

股利（leftc）内的控制类似于以下内容：被

overflow: hidden; 

这将防止和包装或溢出：

<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(&quot;ctl00$_btnSearch&quot;, &quot;&quot;, true, &quot;SearchGroup&quot;, &quot;&quot;, 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> 

Answer 1

您应该将左div的样式设置为所示。