欢迎来到天天文库
浏览记录
ID：23078530
大小：55.50 KB
页数：5页
时间：2018-11-03
《用css控制输入框input悬停交互样式》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、用CSS控制输入框input悬停交互样式>>edu.5151doc.教育资源库制作表单的时候，实现鼠标悬停交互效果有多种方法: 1、在xhtml中直接写入onmouseover、onmouseout脚本就可以实现了，但这样就违背了l也会让页面代码增加，如果只是一个input输入框或许是无所谓的，如果是几十个几百个，增加的字节数就很宠大了。 2、在xhtml中加入小脚本，鼠标经过时可以切换CSS。具体内容请看这篇文章。虽然实现了内容、表现相分离，以后的修改也会很方便。但同样会让页面代码增加。 我们有没有更好的办法来实现输入框input样式悬停交互的效果呢
2、？ 我们今天就讨论这样的方法，直接在CSS文件中写入悬停交互效果的小脚本。不但实现了内容与表现分离，而且使xhtml代码减小，促进了代码重用、更加的优化。 这一方法的原理，主要是应用CSS的expression。input{star:expression(onmouseover=function(){this.style.borderColor="#060"},onmouseout=function(){this.style.borderColor="#c00"})} 上面的代码，声明了，当鼠标移上去的时候，边框的颜色是#060，当鼠标移除的时候边框的
3、颜色是#c00。我们看一下运行效果：<!DOCTYPEhtmlPUBLIC"-//L1.0Strict//EN"".l1/DTD/xhtml1-strict.dtd"><htmlxmlns=".l"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>用CSS控制输入框input悬停交互样式</title><styletype="text/css"><!--input{border:1pxsolid#c00;
4、}input{star:expression(onmouseover=function(){this.style.borderColor="#060"},onmouseout=function(){this.style.borderColor="#c00"})}--></style></head><body><inputtype="text"/><br/>年龄：<inputtype="text"/><br/>性别：<inputtype="text"/><br/>：<inputtype="text"/
5、><br/><inputtype="text"/><br/></body></html><htmlxmlns=".l"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>用CSS控制输入框input悬停交互样式--建站学-.jzxue.</title><styletype="text/css"><!--input{border:1pxsolid#c00;}input{star:exp
6、ression(onmouseover=function(){this.style.borderColor="#060"},onmouseout=function(){this.style.borderColor="#c00"})}--></style></head><body><inputtype="text"/><br/>年龄：<inputtype="text"/><br/>性别：<inputtype="text"/><br/>：<inputtype="text"/><br/><in
7、puttype="text"/><br/></body></html>运行代码复制代码另存代码收藏本页[Ctrl+A全部选择提示：你可先修改部分代码，再按运行]你也可以这样做:<!DOCTYPEhtmlPUBLIC"-//L1.0Strict//EN"".l1/DTD/xhtml1-strict.dtd">12下一页[这篇文章来自..，]<htmlxmlns=".l"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><
8、title>用CSS控制输入框input悬停交互样式
此文档下载收益归作者所有
