Question

将鼠标悬停在html中的select选项时遇到严重问题。当我试图将鼠标悬停在第二个选择选项上时，它假设立即显示500美元钞票的背景图像，但它没有显示任何内容。当我选择该选项时，在我再次进入选择选项并再次选择它之前仍然没有任何反应，它会出现。然后我注意到悬停在1000美元以上的选择选项，后台的500美元什么也没做。当我选择1000美元然后回头徘徊超过500美元时，将会出现1000美元的图像。对于我的意思的一个直观的例子，它在jsfiddle：http://jsfiddle.net/8RdPX/1/

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')";
  }
}

我想通过在悬停所述选项后立即生效背景图片来解决此问题，然后选择该选项时，再次输入选项，如果悬停在另一个选项上进行更改。我只是将这两个用作示例，因为我添加了更多，我希望它能够在每个选项悬停时有效地更改图像。谢谢！

我尝试使用CSS：悬停选择器属性，但似乎不适用于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：

#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;
}

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

0 个答案: