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

删除所有内联事件处理程序添加 mouseenter 和 leave 处理程序访问 css 属性Div 没有 URL我还移动了预览，不必向下滚动太远$(".preview").on("mouseenter",function() {&nbsp; $("#image").css({"background-image": `url(${this.src})`}); // this.src is the DOM notation for the source of the image you are hovering})&nbsp;&nbsp;$(".preview").on("mouseleave",function() {&nbsp; $("#image").css({"background-image": "" })})#image {&nbsp;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">&nbsp; Hover over an image above to display here.<br/></div>

Answer 2

您尝试设置 div 的 url（不是有效属性）。您实际上想要做的是设置 div 的背景 URL。检查我的代码片段以获取正确方向的提示。也不要在更新函数中添加另一个事件监听器。function upDate(previewPic) {&nbsp; let newUrl = previewPic.src;&nbsp; document.getElementById("image").style.backgroundImage = 'url(' + newUrl + ')';}function unDo(abc) {&nbsp; document.getElementById("image").style.backgroundImage = 'url()';}#image {&nbsp; width: 100px;&nbsp; height: 120px;&nbsp; background-size: 100px 120px;}<div id="image">&nbsp; 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">