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

Question

我什至不知道这是否可能。 我正在尝试更改此背景图片：CSS

#topnav ul li
{
height:4em;
list-style:none;
display:table-cell;
text-align:center;
background-image: url(images/libg2.png);
border: 1px solid black;
}

的HTML

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

这样，当您将鼠标悬停在它上面时，图像就会改变。 我知道可以使用CSS悬停来完成此操作，但是我正在尝试使用JavaScript进行操作。

任何帮助都是很棒的，即使有人说“停止您正在尝试的东西，也行不通”。

Answer 1

您正在寻找on.mouseover和on.mouseleave

 $(document).ready(function() { $('img').on('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 { height: 50px; width:50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png"/> 

Answer 2

这给了我一些显示类似于Mac的菜单的想法：

 var SCALE = 0.3; var SIZE = 60; $(document).ready(function() { $('img').hover(function() { var width = parseInt($(this).css('width')); var widthNew = (width * (1 + SCALE)) + "px"; var height = parseInt($(this).css('height')); var heightNew = (height * (1 + SCALE)) + "px"; $(this).animate({'width':widthNew, 'height': heightNew, 'top':'0px', 'left':'0px'},{duration:300}); }, function() { var width = SIZE + "px"; var height = width; $(this).animate({'width':width, 'height':height, 'top':'0px', 'left':'0px'},{duration:300}); }); }); 

 img { height: 60px; width: 60px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpa1/v/t1.0-1/p50x50/1456606_1460821830821643_7486511918744151887_n.jpg?oh=f9b2785989fd8b5588b7ca9e5511827b&oe=555E6440&__gda__=1429015900_851e7cb473ef706fd143e9e27aa1a800' /> <img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/p50x50/10699_10153535875314202_163449416445002093_n.jpg?oh=0f175d991b4e40cddd2f93989290cea1&oe=556C8A6E&__gda__=1431860513_23cc2847318db85ff0a1be57f83bcc29' /> <img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpa1/v/t1.0-1/p50x50/10898122_10153484934294867_4849101525532515761_n.jpg?oh=a207f82cf3758b6749227926eda74089&oe=556DCDC7&__gda__=1433284218_f10e5359128204efd38483d3618b7243' /> <img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/p50x50/1520677_10151904372747017_2089516271_n.jpg?oh=b2d8efeb0c0fc7798e64a47a8a29df90&oe=556398E3&__gda__=1428469569_accebeff7a22c0b49f042ec832c6e99d' /> <img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xfp1/v/t1.0-1/c10.0.50.50/p50x50/10678820_10204778094155474_8940868813772127523_n.jpg?oh=d4dad7a7433e5b4c18482b884b3977dc&oe=552A9784&__gda__=1428368107_2b280d1b6e04c0ad273794113b2b0825' /> <img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/p50x50/10897996_10152971325863698_4809774063415800215_n.jpg?oh=4bffdcdc93d7d67cec3bebd2e610373a&oe=55570368&__gda__=1433040493_dc870d4688164c2d82e7b6807441abb7' />