JQuery not updating the background-image of a element?

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

Remove all inline event handlers
Add mouseenter and leave handlers
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>

Advertisement

Answer