经常看到鼠标滑过网站上的某些按钮会高亮显示,其实很简单。就是用了两幅图片而已,如图:
鼠标滑过时显示高亮的图片即可,如何实现?
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','');
}
就本质而已我感觉就像空间和时间的替换。