function upDate(previewPic) {
let bigImage = document.querySelector('#image');
let u = previewPic.src;
bigImage.style.backgroundImage = "url(u)";
}
<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()">
当我将鼠标悬停在班级预览上时,我想更改我的id =“ image”的背景图片。但我的工作不正常,它显示
在您的Javascript代码中,您调用bigImage.style.backgroundImage = "url(u)";
,它将div的backgroundImage样式设置为url(u)
。为了用变量u
的内容替换u
,您可以使用bigImage.style.backgroundImage = `url(${u})`;
这样的模板文字,在字符串周围使用反引号可以将js代码放到字符串中并放在字符串内。
您需要绑定变量以连接"url(" + u +")"
或使用模板文字url(${u})
,并且还需要为div添加一些宽度和高度。