当我将鼠标悬停在图像上时,我必须更改 div 的背景,但不知何故,尽管 URL 显示在控制台中,但它没有检测到图像。我不知道 jQuery。谢谢。
function upDate(previewPic) {
var divblock = document.getElementById('image');
var img = previewPic.src;
console.log(img);
divblock.style.backgroundImage = img;
divblock.innerHTML = previewPic.alt;
}
<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()">
最佳答案
您需要使用 url
传递图像源,例如 divblock.style.backgroundImage = "url('url of the source')";
function upDate(previewPic) {
var divblock = document.getElementById('image');
var img = previewPic.src;
divblock.classList.add('hoverDiv');
divblock.style.backgroundImage = 'url(' + img + ')';
divblock.innerHTML = previewPic.alt;
}
function unDo() {}
.hoverDiv {
width: 500px;
height: 500px;
margin-bottom: 20px;
color:red;
}
<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()">
关于javascript - 使用javascript更改div的背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60430225/