我们在很多时候其实是需要在网页中设置鼠标效果的,有些是自动生成的,比如一个link链接,那么鼠标移上去自动会变成一个手的样子去点击,有时候一个input输入框,那么鼠标就自动变成一个英文大写I的样子,那么我们是否可以将更多对象设置成我们需要的样子呢?这完全是可以的,接下来就看下效果吧
onClick:鼠标单击事件。(是指鼠标按下,然后松开时产生。)
onDblClick:鼠标双击事件。(是指鼠标快速按下,松开,并再次按下时产生。)
onMouseDown:鼠标按下事件。(鼠标按下时即产生。)
onMouseUp:鼠标释放事件。(是指鼠标从按下的状态到弹起。)
onMouseMove:鼠标移动事件。(是指在特定元素上移动鼠标。)
onMouseOver:鼠标经过事件。(是指,当指针从外界往元素上移动时产生。)
onMouseOut:鼠标离开事件。(是指鼠标从特定元素上离开时产生。)
onLoad:载入事件。(当图象或页面结束载入时产生。)
onUnload:卸载事件。(当访问者离开页面时产生。)
onScroll:滚动条滚动事件。(当访问者使用卷轴上移或下移时产生。)
将这个自定义样式应用到图片上,在浏览器中预览到图片变成了黑白,我们再定义一个样式“.over”,这个样式没有任何内容,是空样式,样式表代码如下:
.over {}
.out {filter: Gray}
然后在图片标记(IMG)里加上“onMouseOver="this.className='over'" onMouseOut="this.className='out'"”,意思为当鼠标经过时,图片为over样式,即彩色正常图象;当鼠标离开时,图片为out样式,即黑白图像。oMouseOver和onMouseOut是鼠标事件,this.className=”…”表示当前对象的class名 为…,注意大小写不要写错,JS对大小写非常敏感。
这样这个效果就完成了,保存后在浏览器里打开,图象是黑白的,当鼠标移上去时,图象变成彩色,鼠标离开时,图象又变回黑白。只要发挥你的想象,通过this.className方法还可以做出很多好看的鼠标效果。
十字
文本光标
等待
默认
问号
左右箭头
上下箭头
系统自动给出效果
系统自动给出效果
:hover 选择器用于选择鼠标指针浮动在上面的元素。
提示: :hover 选择器可用于所有元素,不只是链接。
提示: :link 选择器设置指向未被访问页面的链接的样式,:visited 选择器用于设置指向已被访问的页面的链接,:active 选择器用于活动链接。
注释: 在 CSS 定义中,:hover 必须位于 :link 和 :visited 之后(如果存在的话),这样样式才能生效。
鼠标选中后,背景变色的方法:如:改变选中后,选中区域的背景颜色为浅蓝色。在css中写入如下代码:/* webkit, opera, IE9 */::selection { background:lightblue}/* mozilla firefox */::-moz-selection { background:lightblue}说明:1、-moz-属性前缀是个火狐浏览器用的,而基本的::selection选择器是给谷歌浏览器用的。2、background后面可以直接使用颜色值。如:::selection { background:#ffff00}另外:跟其它CSS选择器的用法一样,也可以嵌套使用,在不同的地方显示不同的颜色。如下:/* webkit, opera, IE9 */div.highlightBlue::selection { background:lightblue}/* mozilla firefox */div.highlightBlue::-moz-selection { background:lightblue}</p><p>/* webkit, opera, IE9 */div.highlightPink::selection { background:pink}/* mozilla firefox */div.highlightPink::-moz-selection { background:pink}