onmouseover与onmouseout事件处理器

最新推荐文章于 2020-07-02 15:56:35 发布

yi3040

最新推荐文章于 2020-07-02 15:56:35 发布

阅读量838

点赞数

文章标签： class html css

本文介绍如何使用onmouseover和onmouseout事件来改变HTML元素的CSS样式。通过实例展示了当鼠标悬停在元素上及移开时，如何动态地更改元素的背景颜色和其他样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

onmouseover与onmouseout事件处理器，分别对应为鼠标移上去和鼠标移开时触发。

onmouseover="this.className='class1';" 是鼠标移到该单元格上去时应用的css样式为“.class1”的样式
onmouseout="this.className='class2';"是鼠标离开单元格后应用的css样式为“.class2”的样式

附带一例子

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>鼠标应用事件this.className详解</title> 
</head> 
<style type="text/css"> 
    .class1{ width:400px; height:30px; margin:0 auto; background:#33CC99; color:#FFFFFF; text-align:center; line-height:30px} 
    .class2{ width:400px; height:30px; margin:0 auto; background:#f60; color:#FFFFFF;  text-align:center; line-height:30px} 
</style> 
<body> 
<p class="class1" onmouseover="this.className='class2'" onmouseout="this.className='class1'"> 
鼠标应用事件this.className详解 
</p> 
</body> 
</html>