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

    Popular posts from this blog

    Member with no value in F# -

    java - Joda Time Interval Not returning what I expect -

    c# - Showing a SelectedItem's Property -