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)~~

style的{{1}}属性没有名为HTMLElement的属性。

Answer 2

你也可以用简单的css来做 demo

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

Javascript添加div背景图片？

3 个答案: