当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS 网页表单实现鼠标悬停交互效果

CSS样式表
CSS 书写有怎样的功能
FireFox中上层高度不影下层的解决办法
CSS text-shadow属性
CSS @import与link的具体区别
详解css 定位与定位应用
网页设计新手30条进阶秘技
CSS分栏布局的方法:绝对定位和浮动
针对IE8正式版的CSS hack
条件 CSS的使用
CSS 垂直居中五种实现方法
CSS教程 汇总让IE6崩溃的几种方法
左上角图片文字环绕在图片右侧
鼠标指向网页图片时图片周围显示虚线框
CSS 快速提升设计可读性和维护性
CSS3 完美实现圆角效果
网页排版 5个CSS基础
CSS3 圆角效果
HTML5 CSS3给网站设计带来出色效果
CSS 网页布局 表格制作实例
css 滚动条换色调整代码

CSS样式表 中的 CSS 网页表单实现鼠标悬停交互效果


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 214 ::
收藏到网摘: n/a

制作表单的时候,实现鼠标悬停交互效果有多种方法:
1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了,但这样就违背了web标准所倡导的内容、表现相分离的原则。以后若要对此进行修改也将会很繁琐。这样直接写入xhtml也会让页面代码增加,如果只是一个input输入框或许是无所谓的,如果是几十个几百个,增加的字节数就很宠大了。
2、在xhtml中加入小脚本,鼠标经过时可以切换CSS。具体内容请看这篇文章。虽然实现了内容、表现相分离,以后的修改也会很方便。但同样会让页面代码增加。

  我们有没有更好的办法来实现输入框input样式悬停交互的效果呢?
  我们今天就讨论这样的方法,直接在CSS文件中写入悬停交互效果的小脚本。不但实现了内容与表现分离,而且使xhtml代码减小,促进了代码重用、更加的优化。
  这一方法的原理,主要是应用CSS的expression,关于expression的更多介绍,请看这篇文章。

代码如下:

input {star : expression(
onmouseover=function(){this.style.borderColor="#060"},
onmouseout=function(){this.style.borderColor="#c00"})}

上面的代码,声明了,当鼠标移上去的时候,边框的颜色是#060,当鼠标移除的时候边框的颜色是#c00。我们看一下运行效果:



提示:您可以先修改部分代码再运行

你也可以这样做



提示:您可以先修改部分代码再运行