首先看效果图。
当鼠标在框外的时候,显示背景色均为白色。鼠标悬停在上方时,背景色变换。鼠标悬停在下方时,背景色变换。
如图所示,一种用的‘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>