为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕码人2483693 2023-03-18 17:38:30
当我将鼠标悬停在此页面上的图片上时,我应该将上面较大的 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">
查看完整描述

2 回答

?
斯蒂芬大帝

TA贡献1827条经验 获得超8个赞

  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>


查看完整回答
反对 回复 2023-03-18
?
白猪掌柜的

TA贡献1893条经验 获得超10个赞

您尝试设置 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">



查看完整回答
反对 回复 2023-03-18
  • 2 回答
  • 0 关注
  • 61 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信