使用javascript更改div的背景图像

Question

当我将鼠标悬停在图像上时，我必须更改 div 的背景，但不知何故，尽管 URL 显示在控制台中，但它并没有检测到图像。 我不知道jQuery。 谢谢你。

 function upDate(previewPic) { var divblock = document.getElementById('image'); var img = previewPic.src; console.log(img); divblock.style.backgroundImage = img; divblock.innerHTML = previewPic.alt; }

 <div id="image"> Hover over an image below to display here. </div> <img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover="upDate(this)" onmouseout="unDo()"> <img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover="upDate(this)" onmouseout="unDo()"> <img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy" onmouseover="upDate(this)" onmouseout="unDo()">

Answer 1

您需要使用url传递图像源，例如divblock.style.backgroundImage = "url('url of the source')";

 function upDate(previewPic) { var divblock = document.getElementById('image'); var img = previewPic.src; divblock.classList.add('hoverDiv'); divblock.style.backgroundImage = 'url(' + img + ')'; divblock.innerHTML = previewPic.alt; } function unDo() {}

 .hoverDiv { width: 500px; height: 500px; margin-bottom: 20px; color:red; }

 <div id="image"> Hover over an image below to display here. </div> <img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover="upDate(this)" onmouseout="unDo()"> <img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover="upDate(this)" onmouseout="unDo()"> <img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy" onmouseover="upDate(this)" onmouseout="unDo()">