Mouseover

    经常看到鼠标滑过网站上的某些按钮会高亮显示，其实很简单。就是用了两幅图片而已，如图：

鼠标滑过时显示高亮的图片即可，如何实现？

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','');

}

就本质而已我感觉就像空间和时间的替换。