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

最新推荐文章于 2026-05-17 05:34:30 发布

原创最新推荐文章于 2026-05-17 05:34:30 发布 · 1w 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#鼠标

本文通过CSS选择器和JavaScript事件处理程序演示了两种不同的鼠标悬停效果：一种使用CSS的:hover伪类，另一种则利用JavaScript的onmouseover和onmouseout事件。这两种方法可以应用于网页元素以改变其背景颜色。

首先看效果图。

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

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

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

-->
</style>

<table>
<tr class="changebgc">
<td>鼠标悬停状态‘hover’</td>
</tr>
<tr onmouseover="this.style.background='#ffcc00'" onmouseout="this.style.background=''">

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