javascript - 我正在尝试编写 js 代码以使用 onmouseover 事件在 div 中显示图像

Question

function display(displayPic) {
  var image = document.getElementById("image");
  image.innerHTML = displayPic.alt;
  image.style.backgroundImage = "url(displayPic.src)";
}

/*Name this external file gallery.css*/

body {
  margin: 2%;
  border: 1px solid black;
  background-color: #b3b3b3;
}
#image {
  line-height: 650px;
  width: 575px;
  height: 650px;
  border: 5px solid black;
  margin: 0 auto;
  background-color: #8e68ff;
  background-image: url('');
  background-repeat: no-repeat;
  color: #FFFFFF;
  text-align: center;
  background-size: 100%;
  margin-bottom: 25px;
  font-size: 150%;
}
.preview {
  width: 10%;
  margin-left: 17%;
  border: 10px solid black;
}
img {
  width: 95%;
}

<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="display(this)">

<img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover="display(this)">

<img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt="Young Puppy" onmouseover="display(this)">

当您将鼠标悬停在图像上时，backgroundImage 属性不起作用，尽管 displayPic.alt 工作正常。

代码是为了显示在图像 div 上，即当前悬停的图像

Answer 1

这条线是罪魁祸首

image.style.backgroundImage = "url(displayPic.src)";

你基本上做的是将背景图像设置为一个 url，即 displayPic.src，你打算做的是从 displayPic 中提取 src 。因此，您需要正确地连接它。

改成

image.style.backgroundImage = "url("+displayPic.src+")";