Javascript添加div背景圖片？

Question

我正在嘗試使div背景圖像在您將鼠標懸停在其上時進行更改以及更改文本顏色。 我可以更改顏色，但是bg圖像不是。 這是我得到的：

在頭上：

#menu1 {
    background-image: none;
}

<script language="javascript">
function txtroll(x)
{
x.style.color="white";
x.style.background-image="url(images/moragames/logo/moragames_logo_01.png);
}
</script>

在身體里：

<div id="menu1" onmouseover="txtroll(this)" onmouseout="txtout(this)">

我似乎無法使鼠標懸停添加背景圖像，但是它可以很好地更改字體顏色。 有什么想法我做錯了嗎？ 謝謝！

Answer 1

嘗試-

x.style.backgroundImage="url(images/moragames/logo/moragames_logo_01.png)";

代替 -

 x.style.background-image="url(images/moragames/logo/moragames_logo_01.png) 

HTMLElement的style屬性沒有稱為background-image屬性。

Answer 2

你也可以用簡單的CSS 演示

或使用Javascript demo1

CSS：

#menu1 {
    background-image: none;
    height:100px;
}
#menu1:hover {
    background-image: url('http://placekitten.com/200/100');
}

Answer 3

你可以試試看

CSS：

.hover {
    background-image: "url(images/moragames/logo/moragames_logo_01.png)";
}

js：

$('#menu1').on('mouseover', function(){
    $(this).addClass('hover');
}).on('mouseout', function() {
    $(this).removeClass('hover');
});