javascript - 使用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()">