jquery - Hover to change background image instead of background color -
Can anyone guide me with this piece of code, currently when I mouse over a link, then this Background color changes on another device. Instead of changing the background color, I want to change to another background image.
& lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; Sample & lt; / Title & gt; & Lt; Script src = "http://code.jquery.com/jquery-1.9.1.js" & gt; & Lt; / Script & gt; & Lt; Style & gt; Body {background: # ccc; Infection: 0.5s; } & Lt; / Style & gt; & Lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {$ ("# div-1"). Hover (function () {$ ('# top_section'). CSS ("background", "# ff9900");}, function ($ ('# Top_section'). CSS ("background", "#ccc");}); $ ("# div-2"). Hover (function () {$ ('# top_section'). CSS ( Css ("background", "#ccc");}); $ ("# div-3") CSS ("background", "red");}, function () {$ ('# top_section') Background "," yellow ");}, function () {$ ('# top_section'). CSS (" background "," #ccc ");});}); & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; An id = "div-1" href = "#" & gt; Orange & lt; / A & gt; & Lt; An id = "div-2" href = "#" & gt; Red & lt; / A & gt; & Lt; An id = "div-3" href = "#" & gt; Yellow & lt; / A & gt; & Lt; Div id = "top_section" style = "height: 100px; width: 100px;" & Gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;
I line $ ('# top_section'). CSS ("background", "# FF9900") was changing;
to $ ('#top_section'). CSS ("background-image", "/images/image1.jpg");
But nothing happens when I mouse over the link thank you very much,
Image URL to url ('..'.)
.
$ ('# top_section'). Try changing CSS ("background-image", "/images/image1.jpg");
to $ ('# css ("background-image", "url (' / images / image1.jpg ')");
or for example See
Comments
Post a Comment