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

通过转义双引号或其他变量名来连接变量将被视为string字面值。

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

Answer 2

如果您愿意稍微修改HTML，可以使用相邻的元素选择器仅使用CSS来实现。

将缩略图移动到HTML中的图像上方，您可以使用此选择器更改相邻div的背景。为每个缩略图分配一个ID：

null

在CSS中使用〜选择器：

<img class="preview" id="bacon" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg">

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

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

<div id="image">
  <span>    
     Hover over an image below to display here.
  </span>
</div>

您可以重新定位元素以匹配原始布局，有关工作示例，请参阅此jsFiddle。

背景图片在悬停时不会改变

2 个答案: