經常看到鼠標滑過網站上的某些按鈕會高亮顯示，其實很簡單。就是用了兩幅圖片而已，如圖：
鼠標滑過時顯示高亮的圖片即可，如何實現？
Html中
<td align="center" valign="middle">
<div id="sidebar" class="sidebarLeft" onmouseover="menu_item_over(this);" onmouseout="menu_item_out(this);" onmousedown="SideBar();return false;">
td>
Css裏
.sidebarRight{width: 6px;height:50px;background: url(../images/hgrab.gif);background-position: -12px 0px; padding:0; margin:0;border:0;cursor: pointer; postion:absolute; display:block;}
.sidebarRight_over{width: 6px;height:50px;background: url(../images/hgrab.gif);background-position: -18px 0px;padding:0; margin:0;border:0;cursor: pointer; postion:absolute; display:block;}
兩者區別在於background-position不同。
Js中：
function menu_item_over(el){
var el;
el.className = el.className + '_over';
}
function menu_item_out( el ) {
var el;
el.className = el.className.replace('_over','');
}
就本質而已我感覺就像空間和時間的替換。