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这样做。