Question

我需要使用悬停功能更改div的背景图像。

我尝试了几次“ document.getElementByID”的迭代，但没有成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="css/gallery.css">
    <script src = "js/gallery.js"></script>
</head>
<body>

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

  </body>
</html>

以下是我尝试过的最新功能：

function upDate(previewPic){
  document.getElementById("image").body.backgroundImage = 
"url('img_bacon.jpg')";

我希望div包含背景图片，但不包含。

Answer 1

尝试使用.innerhtml并传入您想要的正文。

document.getElementById("image").innerhtml = "<div>CONTENT HERE</div>"

Answer 2

这应该有效：

document.getElementById("image").style.backgroundImage = "url(someimage.jpg)";

您可以考虑使用jquery ..那么它看起来像这样：

$('#image').css("background-image", "url(someimage.jpg)");

如何使用JS功能更改背景图片？

2 个答案: