jQueryのはこれが私のレイアウトであるDIVではなく、その子要素

Question

を操作：

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

これは私が書いたクエリです部分的にしか見ることができません。ユーザーがマウスを動かすと、左div（leftc）が190ピクセルに拡大されます。ホバーアウトすると、部分的に見える状態に戻ります。

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(&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; 

表示されます。