看看效果吧，收藏文章，鼠标移入颜色加深，点击变成“已收藏”，再次移入鼠标就有“取消收藏”，如果点击就会再变为“收藏文章”了
html代码：
<div id="shoucang">收藏文章</div>CSS代码：
#shoucang{background-color:#00b7ee
line-height:36px
width:88px
text-align:center
font-size:14px
color:#ffffff
border-radius:2px
cursor:pointer
}
.yishoucang{
width:11px
height:8px
background:url(img/yishoucang.png)
display:inline-block
margin-right:9px
}
JS代码：
<script>window.onload = function (){
var oSc = document.getElementById('shoucang')
var onOff = true
oSc.onclick = function (){
if(onOff){
oSc.innerHTML = '<i class="yishoucang"></i>'+'已收藏'
oSc.style.backgroundColor = '#87aab5'
onOff = false
}else{
oSc.innerHTML = '收藏文章'
oSc.style.backgroundColor = '#87aab5'
onOff = true
}
}
oSc.onmouseover = function (){
if(onOff){
oSc.style.backgroundColor = '#03a6d7'
}else{
oSc.innerHTML = '取消收藏'
oSc.style.backgroundColor = '#527884'
}
}
oSc.onmouseout = function (){
if(onOff){
oSc.style.backgroundColor = '#00b7ee'
}else{
oSc.innerHTML = '<i class="yishoucang"></i>'+'已收藏'
oSc.style.backgroundColor = '#87aab5'
}
}
}
</script>
小图标可以下载使用：
1、日志记录：记录请求信息的日志，以便进行信息监控、信息统计、计算PV（Page View）等。
2、权限检查：如登录检测，进入处理器检测检测是否登录，如果没有直接返回到登录页面；
3、性能监控：有时候系统在某段时间莫名其妙的慢，可以通过拦截器在进入处理器之前记录开始时间，在处理完后记录结束时间，从而得到该请求的处理时间（如果有反向代理，如apache可以自动记录）；
4、通用行为：读取cookie得到用户信息并将用户对象放入请求，从而方便后续流程使用，还有如提取Locale、Theme信息等，只要是多个处理器都需要的即可使用拦截器实现。
5、OpenSessionInView：如Hibernate，在进入处理器打开Session，在完成后关闭Session。
