Логика JQuery не влияет на детей внутри DIV

Question

У меня есть следующие DIV на моей странице. Я увеличиваю / уменьшаю ширину LeftDiv (div id = "leftc") при наведении мыши и наведении мыши

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

Эти слова замечательно, если у leftdiv нет детей div, но если у него есть div детей, то они не затронуты.

Как я могу написать jQuery, чтобы дочерние элементы div также уменьшались и расширялись, как их родительские элементы div?

Answer 1

Это также изменит ширину всех дочерних элементов div

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

Но тебе не нужно этого делать. Вы, вероятно, хотите проверить свой CSS (используйте жидкую ширину для дочерних элементов.)