onMouseOver更改背景图像位置

Question

我正在尝试使用javascript重新定位div的背景图片。这是我的，但似乎没有用。我错过了什么？

<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition="0px 150px"">link one</a>
<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition="0px 350px"">link two</a>

<div id="rubbish_image"></a>

Answer 1

我不完全确定，但是我用JavaScript可以看到两个明显的问题：

1. 在"代码的结束>之前，您已经两个 a
2. 您在字符串中使用" 是不允许的（您可以在用'分隔的字符串中使用"，或者反之亦然，但由"分隔的字符串中的"将终止字符串。）

因此，我建议将代码修改为：

<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition='0px 150px';">link one</a>
<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition='0px 350px';">link two</a>

我不相信这是一个很大的问题，但您也没有在onmouseover属性中终止您的JavaScript，因此我还在每个结尾添加了;。

Answer 2

你正在嵌套双引号，这是行不通的。

一个简单的解决方法是仅在onmouseover属性中使用单引号：

<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition='0px 150px'">link one</a>
<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition='0px 350px'">link two</a>

<div id="rubbish_image"></a>

你已经在getElementById内做了这个。