当我 hover JS 中的另一个图像时，我想将 div 更改为背景图像

Question

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

when i hover on the class preview i want to change the background image of my id ="image". but my cose is not working it is showing

Answer 1

In your Javascript code, you call bigImage.style.backgroundImage = "url(u)"; which sets the div's backgroundImage style to url(u) . In order to have u be replaced with the content of the variable u , you can use a template literal like so bigImage.style.backgroundImage = `url(${u})`; Using the backticks around your string allows you to put js code inside of the string which will be evalauted and put inside of the string.

Answer 2

You need to bind variable either concatenating "url(" + u +")" or using template literals url(${u}) , and also you need to add some width and height for div.

 function upDate(previewPic) { let bigImage = document.querySelector('#image'); let u = previewPic.src; bigImage.style.backgroundImage = `url(${u})`; } function unDo() { }

 #image { width: 100%; height: 50vh; background-repeat: no-repeat; }

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