Javascript 如何在选项悬停后立即更改背景图像？

我在html中将鼠标悬停在select选项上时遇到了一个严重的问题。当我尝试将鼠标悬停在第二个选择选项上时，它会立即显示一张500美元钞票的背景图像，但它没有显示任何内容。当我选择该选项时，仍然没有任何事情发生，直到我再次进入选择选项并再次选择它，它才会出现。然后我注意到，将鼠标悬停在1000美元的select选项上，背景是500美元，什么都不做。当我选择$1000并返回时，将鼠标悬停在$500上方将显示$1000图像。关于我的意思的一个可视示例，它位于JSFIDLE中：

JavaScript代码：

var bg = this.document.getElementsByTagName("html")[0].style.backgroundColor = "white";
// function to dynamically change the background image when user hovers over an option in select menu
function changeBackgroundImage (bg) {
  if (budList == 1) { //if budList selected index is 1
    bg = this.document.getElementsByTagName("html")[0].style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/b/be/500_USD_note%3B_series_of_1934%3B_obverse.jpg')";
  }
  if (budList == 2) { //if budList selected is 2
    bg = this.document.getElementsByTagName("html")[0].style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/8/8a/1000_USD_note%3B_series_of_1934%3B_obverse.jpg')";
  }
}

#test500:hover{
    background: url('http://upload.wikimedia.org/wikipedia/commons/b/be/500_USD_note%3B_series_of_1934%3B_obverse.jpg') no-repeat center center fixed;
}
#test1000:hover{
    background: url('http://upload.wikimedia.org/wikipedia/commons/8/8a/1000_USD_note%3B_series_of_1934%3B_obverse.jpg') no-repeat center center fixed;
}

我想解决这个问题，当所说的选项悬停时，立即使背景图像生效，然后当选择该选项时，再次输入select option，如果悬停在另一个选项上，则更改它。我只是以这两个为例，当我添加更多内容时，我希望它能够在每个选项悬停时有效地更改图像。谢谢

我尝试使用CSS:hover选择器属性，但似乎不适用于html背景图像，仅适用于选项的背景图像：

HTML

<form>
<!--show a large print of green font color and size money-->
    Select your DSLR budget range:
    <select id="budgetSel" onChange="onChange();">
        <option value="selectOneBudget" selected="selected">Select one</option>
        <option id="test500" value="fiveHundredDollars" onMouseOver="changeBackgroundImage(this);">&lt; $500</option>
        <option id="test1000" value="thousandDollars" onMouseOver="changeBackgroundImage(this);">&lt; $1000</option>
    </select>
</form>

---

我忘了，难道不能在CSS中直接使用

：hover

选择器吗？是的，但在javascript中也可以达到同样的效果。我必须使用javascript。你是说你必须使用javascript来实现这个特定的功能？或者仅仅是一般的作业？不，教授说jquery太简单了，在使用任何一个之前必须先理解javascript。我使用CSS解决方案进行了更新，但无效。

选项

元素没有

：hover

事件或psuedo类。下面是使用纯Javascript的

select.onchange

的简化实现：