【javascript/css】关于鼠标事件onmousexxx和css伪类hover
2014-11-07 22:25
369 查看
在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover"。
在实际运用中如何选择,取决于清楚明白的了解他们之间的区别。
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。
在我们为元素绑定了一个事件,当事件发生的时候,可以执行一段javascript代码。
关于鼠标事件,总共有:
onmouseover和onmouseout 鼠标指针移动到或离开元素时触发脚本
onmousedown和onmouseup 鼠标按钮被按下或松开时触发脚本
onclick和ondbclick 鼠标单击和双击时触发脚本
onmousemover 鼠标指针移动时触发脚本
鼠标事件的使用方法大同小异,即在元素标签内分配事件属性,然后将需要执行的javascript代码放置到事件触发的函数内,当我们点击该元素时,就会触发相应javascript代码。
例如:
设立了2个相同的块,分别给2个块分配了鼠标指针移动到元素以及移出元素的事件onmouseover和onmouseout。
鼠标没有动作时:
鼠标移动到内容1上:
鼠标移出内容1:
现在我们来尝试用css的伪类:hover达到这种动态效果。
我们在css样式中添加如下代码:
随后看看效果:
把鼠标移动到内容2上:
移出:
这样就能看出区别了。
CSS 是层叠样式表 (Cascading Style Sheets)的缩写,只能对元素的样式做出改变,而无法对元素的内容动态更改,因为那是前端脚本所做的事。
还有当鼠标移到元素上时,使用伪类":hover"和"onmouseover"虽然在一定程度上能够达到同样的效果,不过当移出元素后,运用了伪类":hover"的内容2恢复了移入前的状态,而运用了"onmouseover"的内容1确保持了js对元素的更改,并且当元素绑定了多个事件时,元素保持最后一个触发的事件的状态。
所以在平时的使用中,如果仅止为了样式显示的效果,可以使用CSS的伪类,如果需要动态改变,则选择js的事件。
在实际运用中如何选择,取决于清楚明白的了解他们之间的区别。
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。
在我们为元素绑定了一个事件,当事件发生的时候,可以执行一段javascript代码。
关于鼠标事件,总共有:
onmouseover和onmouseout 鼠标指针移动到或离开元素时触发脚本
onmousedown和onmouseup 鼠标按钮被按下或松开时触发脚本
onclick和ondbclick 鼠标单击和双击时触发脚本
onmousemover 鼠标指针移动时触发脚本
鼠标事件的使用方法大同小异,即在元素标签内分配事件属性,然后将需要执行的javascript代码放置到事件触发的函数内,当我们点击该元素时,就会触发相应javascript代码。
例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <script type="text/javascript"> function over(obj){ obj.innerHTML = "进来了"; obj.style.background = "red"; } function out(obj){ obj.innerHTML = "出去了"; obj.style.background = "#666"; } </script> <style type="text/css"> #box { width: 400px; border: 2px solid; margin: 200px auto; line-height: 100px; text-Align: center; } #img1,#img2 { height: 100px; margin: 2px; background: #ccc; } </style> <title>opacity</title> </head> <body> <div id="box"> <div id="img1" onmouseover="over(this)" onmouseout="out(this)">这个是内容1</div> <div id="img2">这个是内容2</div> </div> </body> </html>
设立了2个相同的块,分别给2个块分配了鼠标指针移动到元素以及移出元素的事件onmouseover和onmouseout。
鼠标没有动作时:
鼠标移动到内容1上:
鼠标移出内容1:
现在我们来尝试用css的伪类:hover达到这种动态效果。
我们在css样式中添加如下代码:
#img2:hover { background: #666; }
随后看看效果:
把鼠标移动到内容2上:
移出:
这样就能看出区别了。
CSS 是层叠样式表 (Cascading Style Sheets)的缩写,只能对元素的样式做出改变,而无法对元素的内容动态更改,因为那是前端脚本所做的事。
还有当鼠标移到元素上时,使用伪类":hover"和"onmouseover"虽然在一定程度上能够达到同样的效果,不过当移出元素后,运用了伪类":hover"的内容2恢复了移入前的状态,而运用了"onmouseover"的内容1确保持了js对元素的更改,并且当元素绑定了多个事件时,元素保持最后一个触发的事件的状态。
所以在平时的使用中,如果仅止为了样式显示的效果,可以使用CSS的伪类,如果需要动态改变,则选择js的事件。
相关文章推荐
- 关于JavaScript的鼠标移动事件
- 关于JavaScript中监听鼠标滚轮事件
- javascript 中响应鼠标和键盘事件
- JavaScript 鼠标经过事件--显示图像
- javascript 不让鼠标事件触发
- 鼠标右击事件(javascript)
- javascript 鼠标 触发此事件
- 关于javascript+css(asp.net)实现tab功能
- [导入]javascript鼠标事件汇总
- javascript鼠标事件汇总
- javascript 鼠标点击事件
- javascript的event事件与获取鼠标光标
- CSS里关于鼠标样式的一些属性
- CSS Repeater - 交错显示行背景色 table行鼠标进入事件特效 禁止文本换行
- javascript 不让鼠标事件触发
- JavaScript 鼠标经过事件--显示帮助
- javascript之卸载鼠标事件的代码
- (javascript) 获取鼠标事件发生坐标的问题
- javaScript---图片渐显效果和文字大小变化之鼠标响应事件
- 关于javascript中的事件学习及总结