亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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 關注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號