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进行了此操作。