鼠标停留变换颜色（以颜色为例）的2种方法

首先看效果图。

当鼠标在框外的时候，显示背景色均为白色。鼠标悬停在上方时，背景色变换。鼠标悬停在下方时，背景色变换。

如图所示，一种用的‘hover’效果，一种是用的'onmouseover'与'onmouseout' 

<style type="text/css">
<!--
table{ margin:0 auto; width:300px; height:150px; border:1px solid #000000;}    /*定义一个表格样式*/
table tr { background:#fff; height:75px;  width:400px;}    /*定义tr样式*/

table tr.changebgc:hover{ background:#f8b3d0;}    /*当鼠标悬停在table元素里的类名为changebgc的tr元素时，应用样式*/

-->
</style>

<table>
    <tr class="changebgc">
 <td>鼠标悬停状态‘hover’</td>
</tr>
<tr οnmοuseοver="this.style.background='#ffcc00'" οnmοuseοut="this.style.background=''">

/*鼠标指针移动到指定对象上会触发 onmouseover 事件；鼠标指针离开指定对象上会触发 onmouseout 事件，二者非常相似，只是具体的触发动作正好相反。这里我将‘onmouseout’的后面的值设定为空，所以鼠标移开后为白色，否则背景色会变换成设定的颜色。 */
 <td>鼠标事件'onmouseover'与'onmouseout'</td>
</tr>
  </table>