jQuery: Animate HTML DIV width on mouse hover

Question

HiHow to animate HTML DIV width on mouse hover using jQueryltdiv id34dvContent34 align34center34 style34background 61028D width 300px border 1px solid 61028D34gt    ltdiv style34width 300px padding 0px34gt        lth3 style34colorwhite34gtASPSnippetslth3gt    ltdivgtltdivgtWhen mouse hover on it width should expand

Mudassar · Accepted Answer

Hi makenziexcUse jQuery animate function and set the width propertyOn mouseenter event handler set the width and mouseleave event handler reset the widthRefer below exampleHTMLltDOCTYPE htmlgtlthtml lang34en34gtltheadgt    ltmeta charset34utf834gt    ltmeta httpequiv34XUACompatible34 content34IEedge34gt    ltmeta name34viewport34 content34widthdevicewidth initialscale1034gt    lttitlegtlttitlegt    ltstyle type34textcss34gt        body  fontfamily Arial fontsize 10pt     ltstylegtltheadgtltbodygt    ltdiv id34dvContent34 align34center34 style34background 61028D width 300px border 1px solid 61028D34gt        ltdiv style34width 300px padding 0px34gt            lth3 style34colorwhite34gtWelcome to ASPSnippetslth3gt        ltdivgt    ltdivgt    ltscript type34textjavascript34 src34

jQuery: Animate HTML DIV width on mouse hover

Company

Explore

Follow us

Contact Us