jQuery logic not affecting children inside DIV

Question

I have the following DIV's on my page. I am increasing/reducing the width of the LeftDiv (div id="leftc") on mouse over and mouse out

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

jQuery logic,

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

This words great if the leftdiv does not have children div's, but if it has children div, then they are not affected.

How can I write jQuery so that children div's also reduce and expand as their parent div does?

Answer 1

This will also change the width of all child divs

<script type="text/javascript">
    $(document).ready(function() {

        $("#leftc").hover(
            function mouseover() {
                $(this).css({ width: "190px" });
                $("#leftc div").css({ width: "190px" }); // added this line
                $("#centerc").css({ "margin-left": "195px" });
            },
            function mouseout() {
                $(this).css({ width: "25px" });
                $("#leftc div").css({ width: "25px" }); // added this line
                $("#centerc").css({ "margin-left": "29px" });
            }
            );
    });
</script>

But you shouldn't need to do that. You probably want to check your CSS (use liquid width for child divs.)