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

前端技术 2023/09/04 JavaScript
几种鼠标触发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\">
<!--
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\" />

本文地址：https://www.stayed.cn/item/11706

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案