不用搞得太复杂，直接用图片就好：
<html><head>
<style>
ul {
list-style-type: none
}
li {
width: 150px
height: 24px
float: left
background-image: url('bk1.png')
background-size: cover
text-align: center
font-size: 12px
}
li:hover {
color:#E4393C
background-image: url('bk2.png')
}
</style>
</head>
<body>
<ul><li>疯狂抢购</li><li>猜你喜欢</li></ul>
</body>
</html>
先了解一下对象的几个的属性：innerHTML:设置或获取位于对象起始和结束标签内的HTMLscrollHeight:获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置offsetWidth:获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的宽度图片上无缝滚动向上滚动图片下无缝滚动向下滚动图片左无缝滚动向左滚动图片右无缝滚动向右滚动
