JQuery logic not affecting children inside a DIV
I have the following DIV on my page. I increase / decrease LeftDiv width (div id = "leftc") on mouse and mouse
<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>
These words are fine if the leftdiv has no child divs, but if they have child divs then they will not be affected.
How can I write jQuery so that the children of the div also shrink and expand as their parent div goes?
0
a source to share
1 answer
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 don't need to do this. You probably want to check your CSS (use fluid width for child divs.)
0
a source to share