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 был виден только частично. Теперь, когда пользователь наводит курсор мыши, левый div (leftc) должен увеличиться до 190px. При наведении мыши он должен вернуться в частично видимое состояние.

Проблема в том, что в левом элементе 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(&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:

overflow: hidden;

Это предотвратит показ обертки или переполнения.