使用 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' />