Question

所以我在创建一个非常简单的函数方面存在一些问题，该函数应该更改div元素的背景图像以匹配鼠标悬停的任何图像。< / p>

HTML看起来像

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

这只是我要更改的div元素，以及其中一张图片。因此我们的函数应该将图像元素作为参数。但是，我在访问此图片参数的src属性并在.style.backgroundImage属性中使用该属性时遇到了很多麻烦。

我目前的代码是：

function upDate(previewPic){
    var div_element = document.getElementById('image').innerHTML;
    var picurl = "url(previewPic.getAttribute('src'))"
    div_element.style.backgroundImage = "url(picurl)";
 }

这导致我在浏览器控制台上出现Uncaught TypeError: Cannot set property 'backgroundImage' of undefined错误。如果你可以告诉我，我试图将实际的div对象放入变量中，然后将图片网址放入变量中。然后我想使用.style.backgroundImage property。这不起作用。但解决方案可能非常简单。我该怎么做才能解决它？

Answer 1

您的代码存在多个问题。

获取内部html只是将变量设置为元素内部字符串的字符串表示，这不是什么，因为它是<img>标记。
基本上，您将所有内容都放在引号中，因此javascript不会对其执行任何操作。

从函数的第一行中删除.innerHTML，然后将javascript需要的部分作为代码中的代码进行评估。

将您的代码更改为：

function upDate(previewPic){
    var div_element = document.getElementById('image');
    var picurl = "url(" + previewPic.getAttribute('src') +")"
    div_element.style.backgroundImage = picurl;
}

这应该有用。

Answer 2

如果我了解某些图片悬停你想改变div背景？我会用jquery做的：

$('img').hover(function(){

$('div').css(''background-image:'url("image_link")');

});

更改元素的背景图像

2 个答案: