[当我在JS中悬停其他图像时,我想将div更改为背景图像

问题描述 投票:0回答:2

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 html css
2个回答
0
投票

在您的Javascript代码中,您调用bigImage.style.backgroundImage = "url(u)";,它将div的backgroundImage样式设置为url(u)。为了用变量u的内容替换u,您可以使用bigImage.style.backgroundImage = `url(${u})`;这样的模板文字,在字符串周围使用反引号可以将js代码放到字符串中并放在字符串内。


0
投票

您需要绑定变量以连接"url(" + u +")"或使用模板文字url(${u}),并且还需要为div添加一些宽度和高度。

© www.soinside.com 2019 - 2024. All rights reserved.