带来一篇CSS:网页表单完成鼠标悬停交互效果

显示全部楼层 · 发表于 2015-1-15 23:54:20

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
网页制造poluoluo文章简介：我们有无更好的举措来完成输出框input款式悬停交互的效果呢？我们有无更好的举措来完成输出框input款式悬停交互的效果呢？
制造表单的时分，完成鼠标悬停交互效果有多种办法:
1、在xhtml中间接写进onmou搜索引擎优化ver、onmou搜索引擎优化ut剧本就能够完成了，但如许就违反了web尺度所倡议的内容、体现相分别的准绳。今后若要对此举行修正也将会很烦琐。如许间接写进xhtml也会让页面代码增添，假如只是一个input输出框也许是无所谓的，假如是几十个几百个，增添的字节数就很宠年夜了。
　　2、在xhtml中到场小剧本，鼠标经由时能够切换CSS。详细内容请看这篇文章。固然完成了内容、体现相分别，今后的修正也会很便利。但一样会让页面代码增添。

　　我们有无更好的举措来完成输出框input款式悬停交互的效果呢？
　　我们明天就会商如许的办法，间接在CSS文件中写进悬停交互效果的小剧本。不仅完成了内容与体现分别，并且使xhtml代码减小，增进了代码重用、加倍的优化。
　　这一办法的道理，次要是使用CSS的expression，关于expression的更多先容，请看这篇文章。
input{star:expression(
onmou搜索引擎优化ver=function(){this.style.borderColor="#060"},
onmou搜索引擎优化ut=function(){this.style.borderColor="#c00"})}
下面的代码，声了然，当鼠标移上往的时分，边框的色彩是#060，当鼠标移除的时分边框的色彩是#c00。我们看一下运转效果：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>用CSS把持输出框input悬停交互款式</title><styletype="text/css"></style></head><body>姓名：<inputtype="text"/> 岁数：<inputtype="text"/> 性别：<inputtype="text"/> 手机：<inputtype="text"/> 地点：<inputtype="text"/> </body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
你也能够如许做
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>用CSS把持输出框input悬停交互款式</title><styletype="text/css"></style></head><body>姓名：<inputclass="in80"type="text"/> 岁数：<inputclass="in40"type="text"/> 性别：<inputclass="in40"type="text"/> 手机：<inputclass="in120"type="text"/> 地点：<inputclass="in200"type="text"/> </body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 带来一篇CSS:网页表单完成鼠标悬停交互效果

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子