使用mouseover（）javascript更改CSS中设置的div元素背景

我甚至不确定这是否可能。我正在尝试更改此背景图像： CSS

HTML

因此，当您将鼠标移到它上面时，图像会发生变化。 我知道它可以用CSS和hover来完成，但我正在尝试用JavaScript来完成

---

任何帮助都是很棒的，即使有人说“停止你的尝试，它不会起作用”。

你正在寻找一个

on.mouseover

和

on.mouseleave

$（文档）.ready（函数（）{
$（'img'）。在（'mouseover'，function（）上{
$（this.attr（'src'，'http://www.adventureswithwords.com/wp-content/uploads/2014/11/unhappy_face_sticker-p217427116611791537qjcl_400.jpg');
});
$（'img'）。on（'mouseleave'，function（）{
$（this.attr（'src'，'http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png');
});
});
img{
高度：50px；
宽度：50px；
}
这让我想到了显示类似Mac的菜单：


var标度=0.3；
变量大小=60；
$（文档）.ready（函数（）{
$（'img'）。悬停（函数（）{
var-width=parseInt（$（this.css（'width'））；
变量widthNew=（宽度*（1+刻度））+“px”；
var height=parseInt（$（this.css（'height'））；
var heightNew=（高度*（1+刻度））+“px”；
$（this）.animate（{'width'：widthNew，
“高度”：heightNew，
“顶部”：“0px”，
'左'：'0px'}，{duration:300}）；
},
函数（）{
变量宽度=大小+“px”；
高度=宽度；
$（this）.animate（{'width'：宽度，
“高度”：高度，
“顶部”：“0px”，
'左'：'0px'}，{duration:300}）；
});
});
img{
高度：60px；
宽度：60px；
}

向我们展示您尝试过的代码……即使有人说“停止您的尝试，它不会起作用”——除非有一些实际的JavaScript，否则不会！你可以从阅读和开始。
#topnav ul li
{
height:4em;
list-style:none;
display:table-cell;
text-align:center;
background-image: url(images/libg2.png);
border: 1px solid black;
}

<div id="topnav">
<ul>
<li><a href="blahblah.html">blahblah</a></li>
<li><a href="blahblah1.html">blahblah1</a></li>
<li><a href="blahblah2">blahblah2</a></li>
<li><a href="blahblah3.html">blahblah3</a></li>
<li><a href="blahblah4.html">blahblah4</a></li>
</ul>
</div>