⽤CSS控制输⼊框input悬停交互样式
制作表单的时候，实现⿏标悬停交互效果有多种⽅法:
  1、在xhtml中直接写⼊onmouseover、onmouseout脚本就可以实现了，但这样就违背了web标准所倡导的内容、表现相分离的原则。以后若要对此进⾏修改也将会很繁琐。这样直接写⼊xhtml也会让页⾯代码增加，如果只是⼀个input输⼊框或许是⽆所谓的，如果是⼏⼗个⼏百个，增加的字节数就很宠⼤了。
  2、在xhtml中加⼊⼩脚本，⿏标经过时可以切换CSS。具体内容请看这篇⽂章。虽然实现了内容、表现相分离，以后的修改也会很⽅便。但同样会让页⾯代码增加。
  我们有没有更好的办法来实现输⼊框input样式悬停交互的效果呢？
  我们今天就讨论这样的⽅法，直接在CSS⽂件中写⼊悬停交互效果的⼩脚本。不但实现了内容与表现分离，⽽且使xhtml代码减⼩，促进了代码重⽤、更加的优化。
  这⼀⽅法的原理，主要是应⽤CSS的expression。
input {star : expression(
οnmοuseοver=function(){this.style.borderColor="#99BBE8"},
οnmοuseοut=function(){this.style.borderColor="#B5B8C8"})}
  上⾯的代码，声明了，当⿏标移上去的时候，边框的颜⾊是#060，当⿏标移除的时候边框的颜⾊是#c00。我们看⼀下运⾏效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>⽤CSS控制输⼊框input悬停交互样式</title>
<style type="text/css">
<!--
input {border:1px solid #B5B8C8;}
input {star : expression(
οnmοuseοver=function(){this.style.borderColor="#99BBE8"},
οnmοuseοut=function(){this.style.borderColor="#B5B8C8"})}
-->
</style>
</head>
<body>
姓名：<input type="text" /><br />
年龄：<input type="text" /><br />
性别：<input type="text" /><br />
⼿机：<input type="text" /><br />
地址：<input type="text" /><br />
</body>
</html>
你也可以这样做:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>⽤CSS控制输⼊框input悬停交互样式</title>
<style type="text/css">
<!--
input {border:1px solid #B5B8C8; }
input {star : expression(
οnmοuseοver=function(){this.style.backgroundColor="#DFE8F6"},
οnmοuseοut=function(){this.style.backgroundColor="#FFFFFF"})}
.in40 {width:40px;}
.in80 {width:80px;}
.in120 {width:120px;}
.in200 {width:200px;}
-->
</style>
</head>
<body>
姓名：<input class="in80" type="text" /><br />
年龄：<input class="in40" type="text" /><br />
性别：<input class="in40" type="text" /><br />
⼿机：<input class="in120" type="text" /><br />
地址：<input class="in200" type="text" /><br />
</body>
</html>
以下是参考ext样式风格，⾃定义的显⽰，该样式触发的条件是⽂本框获取焦点与否
input{
margin-left:3;
border:1 solid #B5B8C8;
font: normal 11px tahoma, arial, helvetica, sans-serif;
star : expression(
οnfοcus=function(){
input框禁止输入this.style.borderColor="#99BBE8";
this.style.backgroundColor="#DFE8F6";
},
οnblur=function(){
this.style.borderColor="#B5B8C8";
this.style.backgroundColor="#FFFFFF";
}
)
;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。