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逻辑，

<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（使用子宽度的液体宽度。）

jQuery逻辑不会影响DIV中的子项

1 个答案: