'Expanding div on hover relative to a parent div with jQuery

I have a parent div with a few children:

<div id="main">
   <div id="child1">
      <div id="child2">
         <div id="child3">content</div>
      </div>
   </div>
</div>

The CSS is:

#main {width: 700px;}
#child1 {width: 150px;}
#child2 {width: 100%;}
#child3 {width: 100%;}

On hover, I want #child3 to expand to 90% width of #main, not be constrained to the 150px of its parent.

I tried giving #child3 a fixed width in px, but that caused a lot of issues with content spilling outside the #main div. I want to keep the expanded content of #child3 inside #main at all times.

Can this be done with JavaScript or jQuery? Please advise. Thanks!

JSFiddle here.

javascriptjquerycss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions