您现在的位置是:首页 > 缘文分享缘文分享

CSS鼠标经过、移动、点击事件

2020-11-10【缘文分享】人已围观

简介缘文分享:内心如果平静,外在就不会有风波。

本文为大家介绍下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{ 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">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"#E1F1F1":"#F0F0F0")}
-->
高级应用:每个单元格变色
<style type="text/css">
<!--
tr {background-color:expression((this.sectionRowIndex%2==0)?"red":"blue")}
td {background-color:expression((this.cellIndex%2==0)?"":((this.parentElement.sectionRowIndex%2==0)?"green":"yellow"))}
-->
</style>


添加CSS文件引用:

复制代码 代码如下:


<link id="cssStyle" rel="stylesheet" type="text/css" href="../style.css" />

Tags:CSS鼠标事件响应事件经过   移动   点击

很赞哦! ()

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 建站时间:2019-05-15
  • 文章统计47篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 公众号:资源连接