第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會有你想問的

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

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

慕碼人2483693 2023-03-18 17:38:30
當(dāng)我將鼠標(biāo)懸停在此頁面上的圖片上時(shí)，我應(yīng)該將上面較大的 div 元素的 src 屬性更新為我當(dāng)前懸停在其上的圖像的圖像 url。我的斷點(diǎn)達(dá)到"$('#image').on('懸停', function() {"行，但實(shí)際上不會在下一行設(shè)置 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貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊

  1. 刪除所有內(nèi)聯(lián)事件處理程序

  2. 添加 mouseenter 和 leave 處理程序

  3. 訪問 css 屬性

Div 沒有 URL

我還移動了預(yù)覽，不必向下滾動太遠(yuǎn)

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


查看完整回答
反對 回復(fù) 2023-03-18
?
白豬掌柜的

TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個(gè)贊

您嘗試設(shè)置 div 的 url（不是有效屬性）。您實(shí)際上想要做的是設(shè)置 div 的背景 URL。檢查我的代碼片段以獲取正確方向的提示。


也不要在更新函數(shù)中添加另一個(gè)事件監(jiān)聽器。


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



查看完整回答
反對 回復(fù) 2023-03-18
  • 2 回答
  • 0 關(guān)注
  • 131 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號