变换背景方式:
1.通过变换背景图位置的方式变换链接的图片
.id_Bm_Bt_tc span a {
color: #64A434;
background: url("../image/c_more.gif") no-repeat scroll 0 2px transparent;
display: block;
float:right;
line-height: 20px;
padding-left: 20px;
}
.id_Bm_Bt_tc span a:HOVER {
color: #999999;
background-position:0 -18px;
}
html:
<div class="id_Bm_Bt_tc left">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="${ctp }/modulePage/index/image/e21_pi_045.jpg"/>
</td>
<td>
社区动态
</td>
<td>
<span>
<a href="${ctp }/page/forum_forum_forumIndex">详情</a>
</span>
</td>
</tr>
</table>
</div>
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAgCAIAAABM58uRAAABYUlEQVRoge2YyxGDMAwFXRKdUQ+nFBDaoIg0kqtygGGMJdkC8/hFO1xihGx2FGEI5MAIZy/gybhcIC4XiMsF4nKBuFwgLheIywXicoEcJLcdqOkpdBQ6anpqh2OmPRm43HaYnPLj8Yqxcudq1Y6mh85/MkC5Ys2+Pn9Uv0C5YqkSCX4Led5fbVw7+LVJklU/N4OSG5ctJ/GbFG/GWuIuvkRbCffLg8cR41x2UHLjbisS+8103vkONadG9VpkrDWOX3Wz6uJ3ySLkNfzrY79ykqXWTH9YsTCpA2iVa08rz1V5vZq3Wm6+J1haRz5+HifFeD1XbAta4WwQoSXhg/b+bueKD7RpZYZbLcbY5fJT120LVL0VK3qxGMlsA/gT7DY9l6pfIiw6xLAkCS2NP6Ry6ZDX32LlWpTdr3JHNny4sewEMsHJWZ5cnJGfuoHcEf/k6OyMywXicoG4XCAuF4jLBfIDAKJk1uG1GbEAAAAASUVORK5CYII=)
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAAgCAIAAABM58uRAAABVElEQVRoge2Y0Q3EIAhAu/8G7MAcrOV9NDGcAtImaDW8r6tSqk9iz14lCeNaPYCTSbmBpNxAUm4gKTeQlBtIyg0k5QayUi4RISIAAAAiEtHCwUSwRi4RgcJJihfIrdWqgYjzRxXBbLlizfaNZ9TvbLliqRZJ+jCPP3+TsP5ukjy69DBVLjdo9/bFa1jTEho6er998N3ifJbIVLl8txUDuF9j560ZNKdO9Vok18rjH053rlzP4tvVXdjM+aUW5h+Y9ojXZVu2k2uUm9HbVKURX9vLdnuuZ1vgxwrepd34QoSWpG+013LINi+0G89UhzF+uX3Xo/r90F+x5nCh3W63eIwA2x+MZdDC/JPd7BDh0SGGNUnKv3FRmWedbM48/tpGNN1ikp0q9+bFhxt7PUR9duXaLWXTyq3kJ8evMKzcyXjGvI3cHUm5gaTcQFJuICk3kJQbyA8vsmqINvTREQAAAABJRU5ErkJggg==)
滑动门事件
<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
#header {
float:left;
100%;
background:yellow;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}
#header a {
display:block;
}
#header li {
float:left;
background:url("norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}
#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;
}
#header #current {
background-image:url("norm_right_on.gif");
}
#header #current a {
background-image:url("norm_left_on.gif");
}