JQuery 不更新背景图像<div>元素？

Question

When I hover over a picture on this page, I should be updating the larger div element's src attribute above to be the image url of the image I am currently hovering over.

My breakpoints reach up to the

"$('#image').on('hover', function() {"

line, but won't actually set the url attribute of the div element on the next line. Any pointers?

 function upDate(previewPic) { let newUrl = previewPic.src; $('#image').on('hover', function() { $('#image').attr("url", newUrl); }); };

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="image"> Hover over an image below to display here. </div> <img alt="Batter is ready" class="preview" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-7.jpg"> <img alt="Perfect Baking" class="preview" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-6.jpg"> <img alt="Yummy yummy cup cake" class="preview" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg">

Answer 1

1. Remove all inline event handlers
2. Add mouseenter and leave handlers
3. Access the css property

Divs do not have URLs

Also I moved the preview to not have to scroll too far down

 $(".preview").on("mouseenter",function() { $("#image").css({"background-image": `url(${this.src})`}); // this.src is the DOM notation for the source of the image you are hovering }) $(".preview").on("mouseleave",function() { $("#image").css({"background-image": "" }) })

 #image { height: 500px }

 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <img alt="Batter is ready" class="preview" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-7.jpg" height="50"> <img alt="Perfect Baking" class="preview" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-6.jpg" height="50"> <img alt="Yummy yummy cup cake" class="preview" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg" height="50"> <div id="image"> Hover over an image above to display here.<br/> </div>

Answer 2

You try to set the url (not a valid attribute) of a div. What you actually want to do is to set the background URL of the div. Check my snippet for a hint into the right direction.

Also dont add another event listener inside the update function.

 function upDate(previewPic) { let newUrl = previewPic.src; document.getElementById("image").style.backgroundImage = 'url(' + newUrl + ')'; } function unDo(abc) { document.getElementById("image").style.backgroundImage = 'url()'; }

 #image { width: 100px; height: 120px; background-size: 100px 120px; }

 <div id="image"> Hover over an image below to display here. </div> <img alt="Batter is ready" class="preview" width="50" height="60" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-7.jpg"> <img alt="Perfect Baking" class="preview" width="50" height="60" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-6.jpg"> <img alt="Yummy yummy cup cake" class="preview" width="50" height="60" onmouseout="unDo()" onmouseover="upDate(this)" src="https://cdn.sallysbakingaddiction.com/wp-content/uploads/2017/06/moist-chocolate-cupcakes-5.jpg">