Question

我对JavaScript很陌生，我正在努力解决问题。我在表格中有一系列图像，当你将鼠标悬停在一个图像上时，我希望每个图像都显示在div元素中。问题是，代码似乎没有做任何事情。我将鼠标悬停在div元素上，并且没有对#bigdisplay元素进行任何更改。如果我用一个属性如color替换backgroundImage，它可以完全正常工作。我究竟做错了什么？这是我的div元素的代码。

<div id="image1" onmouseover="document.getElementById('bigdisplay').style.backgroundImage='url('images/Slideshow1.png')';">
/* ... */
</div>

如果我必须提供我网站上的任何其他代码，我会（虽然我不相信任何相关的代码）。任何帮助将不胜感激！谢谢！

Answer 1

您未正确转义属性中的字符串。使用Javascript而不是HTML属性（与eval一样糟糕）附加侦听器，并且它更易于读写：

const bigdisplay = document.querySelector('#bigdisplay');
document.querySelector('#image1').addEventListener('mouseover', () => {
  bigdisplay.style.backgroundImage = "url('images/Slideshow1.png')";
});

Answer 2

你的代码很好。我将js分开只是为了更容易阅读。你的问题是要么没有div的高度，要么你的路径错了

＆＃13;

seq(10,35, length.out=5)
[1] 10.00 16.25 22.50 28.75 35.00

＆＃13;

function test(){ document.getElementById('bigdisplay').style.backgroundImage=
'url("https://res.cloudinary.com/rss81/image/upload/gw.jpg")'}

＆＃13;

html,body,div{
height:100%;
}

＆＃13;

Answer 3

我认为一个问题是您使用单引号引用'images / Slideshow1.png'。但你也使用单引号'url（'images / Slideshow1.png'）'。所以存在冲突。试试'url（“images / Slideshow1.png”）'。为此，我发现在链接到html文档的js文档中定义事件处理函数更好。

JavaScript：backgroundImage不会随onMouseOver而改变

3 个答案: