javascript - jquery swapping image on div rollover -
I am trying to gain a simple swapping effect on Div rollover, but it is not working.
LIT here
and gt; Id id = "main 1" & gt; & Lt; A href = "#" & gt; & Lt; Img src = "picture / plane 1.jpg" id = "image1" style = "margin: 0 4px; margin-left: 0;" /> & Lt; / A & gt; & Lt; Div class = "flex-caption" & gt; & Lt; H3 & gt; Hollywood & lt; / H3 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Li & gt;
and jQuery
$ (function () {$ ('# main1'). Hover (function () {$ ('# image1') .src = "images / img01.jpg";}, function () {$ ('# image1'). Src = "picture / plane 1.jpg";});});
& nbsp; & Nbsp; & Nbsp; & Nbsp;
Is There A Better Way? Without JS Why?
If you use JS , you must wait for a new server request for a new image on the hover, so ... you will have enough professional results by doing this.
& lt; Li & gt; & Lt; Div id = "main1" & gt; & Lt; A href = "#" & gt; & Lt; Img src = "picture / plane 1.jpg" /> & Lt; Img src = "images / img01.jpg" /> & Lt ;! - It's a hidden but stuffy! - & gt; & Lt; / A & gt; & Lt; Div class = "flex-caption" & gt; & Lt; H3 & gt; Hollywood & lt; / H3 & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Li & gt;
CSS:
# main1> An IMG + IMG {display: none; } # Main1 & gt; A: Hover img + img {display: block; } If you are just learning jQuery, normally JS and you want to play: var $ img = $ (' # Image '); // You are planning to reuse the cache elements! $ ('# Main1') Hover (function () {$ img [0] .src = "images / img01.jpg";}, function () {$ img [0] .src = "picture / plane 1.jpg";});
Or also use an array:
var arr = ["images / plane1.jpg", "images / img01.jpg"]; Var $ img = $ ('# image'); $ ('# Main1') Hover (function () {$ img [0] .src = arr.reverse () [0];});
or is also using conditional operator :
(aka Tornier operator ):
var $ img = $ ('# image'); $ ('# Main1') Hover (eve) {$ img [0] .src = "picture /" + (ev.type == "mouseenter"? "Img01": "plane1") + ".jpg";});
Comments
Post a Comment