CSS鼠标响应事件经过、移动、点击示例介绍

ttx9n · 发表于 2013-9-4 16:15:36

本文为大家介绍下CSS 鼠标响应事件：鼠标经过CSS、鼠标移动CSS、鼠标点击CSS以及示例，喜欢的朋友可以参考下几种鼠标触发CSS事件。
说明：
onMouseDown 按下鼠标时触发
onMouseOver 鼠标经过时触发
onMouseUp 按下鼠标松开鼠标时触发
onMouseOut 鼠标移出时触发
onMouseMove 鼠标移动时触
复制代码代码如下:
<html>
<head>
<title>CSS 鼠标响应事件</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.Off{ background-color: #00FF66; padding:100px;}
.up{background-color: #FF0000; padding:100px}
</style>
</head>
<body>
<ul class=Off onMouseOut="this.className='Off'" onMouseOver="this.className='Up'">
<h4>鼠标响应事件当鼠标经过移出时切换css</h4>
<li>onMouseDown 按下鼠标时触发
<li>onMouseOver 鼠标经过时触发
<li>onMouseUp 按下鼠标松开鼠标时触发
<li>onMouseOut 鼠标移出时触发
<li>onMouseMove 鼠标移动时触发 </li>
</ul>
</body>
</html>

复制代码代码如下:
<span style="color: red;">鼠标经过表格变色样式:<br></span>

复制代码代码如下:
<style>
table { background-color:#000000; cursor:hand; width:100%; }
td {
/*设置onmouseover事件*/
onmouseover: expression(onmouseover=function (){this.style.borderColor ='blue';this.style.color='red';this.style.backgroundColor ='yellow'});
/*设置onmouseout事件*/
onmouseout: expression(onmouseout=function (){this.style.borderColor='';this.style.color='';this.style.backgroundColor =''});
background-color:#ffffff;
}
</style>
控制表格隔行变色:
简单应用:
<style type="text/css">

高级应用:每个单元格变色
<style type="text/css">

</style>

添加CSS文件引用:
复制代码代码如下:
<link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" />

qzdhcgs · 发表于 2022-8-9 02:00:20

管灌灌灌灌灌灌灌灌灌灌

白狐软件 · 发表于 2022-8-17 00:21:51

还有什么好东西没

czoz5y · 发表于 2022-8-21 13:04:47

撒旦撒旦撒擦擦擦擦

plvo189 · 发表于 2022-8-29 07:37:38

我找了挺久终于找到了

i1efp6c · 发表于 2022-11-3 07:57:52

看看看看

lba36h7g · 发表于 2022-12-18 12:19:38

逛逛看看瞧瞧

r8st9 · 发表于 2023-1-25 08:57:06

感谢楼主分享

8ayoqrpj · 发表于 2023-4-30 21:47:53

数据库了多久撒快乐的健身卡啦

rveqwdpw5 · 发表于 2023-6-27 05:24:09

撒房产税陈飞飞

账号		自动登录	找回密码
密码			立即注册

[JavaScript] CSS鼠标响应事件经过、移动、点击示例介绍

相关帖子