jquery移入移除的问题
我想鼠标移入变成另外一张图片，求指点
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<link rel="stylesheet" href="css/css.css" />
</head>
<body>
<div class="sideFx">
<ul>
<li id="new1">
<a href="">
<div ><img src="img/facebook.png" /></div>
</a>
</li>
<li id="new2">
<a href="http://weibo.com/pkuih">
<div><img src="img/twitter.png" /></div>
</a>
</li>
<li id="new2">
<a href="javascript:;">
<div><img src="img/twitter.png" /></div>
</a>
</li>
</ul>
</div>
<script language="javascript">
$("#new1 img").hover(function(){
$(this).css("background","url(img/facebook-2.png)");
</script>
</body>
</html>
kamite
9 years, 9 months ago
Answers
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<link rel="stylesheet" href="css/css.css" />
</head>
<body>
<div class="sideFx">
<ul>
<li>
<a>
<div><img class="pic" width="50" height="50" src="http://pic27.nipic.com/20130130/11901137_154815354175_2.png" hsrc="http://www.baidu.com/img/bd_logo1.png" /></div>
</a>
</li>
<li>
<a href="http://weibo.com/pkuih">
<div><img class="pic" src="img/twitter.png" /></div>
</a>
</li>
<li>
<a>
<div><img class="pic" src="img/twitter.png" /></div>
</a>
</li>
</ul>
</div>
<script>
$(function(){
$('.sideFx .pic').hover(function(){
$('.sideFx').data('tmpsrc', $(this).attr('src'));
$(this).attr('src', $(this).attr('hsrc'));
}, function(src){
$(this).attr('src', $('.sideFx').data('tmpsrc'));
})
})
</script>
</body>
</html>
参考第一张图
yukirin
answered 9 years, 9 months ago
CSS的
:hover
实现，鼠标离开时能自动还原：
https://jsfiddle.net/dwqs/86gvetwb/
JQuery实现，则要监听鼠标移入和移出事件： https://jsfiddle.net/dwqs/vhostduz/
建议用CSS Sprite来做，这样利用
hover
改变
background-position
就行，而不是用三张图片。
London
answered 9 years, 9 months ago
