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