javascript - 悬停时背景图像不会改变

Question

我编写了以下代码来更改鼠标悬停在另一个区域上时 div 的背景图像。图像没有改变。

function upDate(previewPic) { 
    document.getElementById("image").innerHTML=previewPic.alt;
    document.getElementById("image").style.backgroundImage = "url('+previewPic.src+')";
}

HTML:

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

CSS:

/*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%;
}

JavaScript:

/*Name this external file gallery.js*/

function upDate(previewPic) {
    document.getElementById("image").innerHTML=previewPic.alt;
    document.getElementById("image").style.backgroundImage = "url(' + previewPic.src + ')";
}

function unDo() {
    document.getElementById("image").innerHTML="Hover over an image below to display here.";
    document.getElementById("image").style.backgroundColor="8e68ff";
    document.getElementById("image").style.backgroundImage = "url('')";
}

Codepen

Answer 1

通过转义双引号连接变量，否则变量名称将被视为字符串文字。

/*Name this external file gallery.js*/

function upDate(previewPic) {
  document.getElementById("image").innerHTML = previewPic.alt;
  document.getElementById("image").style.backgroundImage = "url(\"" + previewPic.src + "\")";
}

function unDo() {

  document.getElementById("image").innerHTML = "Hover over an image below to display here.";
  document.getElementById("image").style.backgroundColor = "8e68ff";
  document.getElementById("image").style.backgroundImage = "url('')";

}

/*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="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()">