专注于互联网--专注于架构

 最新标签
网站地图
文章索引
Rss订阅

首页 »Html教程 » css输入框:用CSS控制输入框input样式，悬停交互如何实现？ »正文

css输入框:用CSS控制输入框input样式，悬停交互如何实现？

来源: 发布时间:星期四, 2009年2月12日 浏览:105次 评论:0


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

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

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Example Source Code\"/> Example Source Code [www.52css.com]
input {star : expression(
onmouseover=function{this.style.borderColor=\"#060\"},
onmouseout=function{this.style.borderColor=\"#c00\"})}


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

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]

    =\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]


　　当然你也可以这样做我们来看看下面运行效果:

\" style=\"margin:0px 2px -3px 0px\" alt=\"div css xhtml xml Source Code to Run\"> Source Code to Run [www.52css.com]

    =\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ]


　　在定义输入框input样式悬停交互效果同时你可以单独为input输入框另外定义类用类和expression同时控制input输入框更多东西需要你自己多研究多试验了:)
　　
标签：cssinputbutton cssinputtype inputcss css输入框
0
我顶

相关文章

读者评论

发表评论

  • 昵称：
  • 内容：

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章