现在的位置: 首页 > 综合 > 正文

Mouseover

2013年08月13日 ⁄ 综合 ⁄ 共 808字 ⁄ 字号 评论关闭

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

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

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

}

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

抱歉!评论已关闭.