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

Question

当我将鼠标悬停在此页面上的图片上时，我应该将上面较大的 div 元素的 src 属性更新为我当前悬停在其上的图像的图像 url。我的断点达到"$('#image').on('悬停', function() {"行，但实际上不会在下一行设置 div 元素的 url 属性。任何指针？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. 删除所有内联事件处理程序

2. 添加 mouseenter 和 leave 处理程序

3. 访问 css 属性

Div 没有 URL

我还移动了预览，不必向下滚动太远

$(".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

您尝试设置 div 的 url（不是有效属性）。您实际上想要做的是设置 div 的背景 URL。检查我的代码片段以获取正确方向的提示。

也不要在更新函数中添加另一个事件监听器。

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">