本文介绍了一种使用CSS背景尺寸属性结合jQuery实现鼠标悬停效果的方法。通过简单的HTML结构和CSS样式定义，辅以jQuery的hover及animate方法，实现了列表项背景图片的放大和还原效果。
<style type="text/css">
li{
background-image: url(images/case_back_03.png);
background-repeat: no-repeat;
width: 200px;
height: 200px;
background-size: 100%;
}
</style>
<body>
<ul><li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
$("li").hover(function(){
$(this).stop().animate({"background-size":"110%"},500);
});
$("li").mouseout(function(){
$("li").stop().animate({"background-size":"100%"},500);
});
</script>
stop()-----停止当前动画，继续下一个动画
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
