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這樣做。