百度鼠标悬停交互效果方法

直接在CSS文件中控制输入框input样式，鼠标悬停交互效果（仅IE有效）。不但实现了内容与表现分离，而且使xhtml代码减小，促进了代码重用、更加的优化。演示见本站输入表单（如评论、注册、登入表单）。

这一方法的原理，主要是应用CSS的expression，IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript脚本关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。说简单点就是：我们可以通过expression把Javascript脚本写放在css文件中，通过它来实现一些很方便的功能与效果。

我们看下面的CSS代码：
input {star : expression(
onmouseover=function(){this.style.borderColor="#FF9900"},
onmouseout=function(){this.style.borderColor="#666666"})}

需要引起你特别重视的：若不是非常特别的需要用到expression，一般不建议使用expression，因为expression非常占用服务器的CPU资源。

在CSS样式表里写脚本代码

CSS里也能写脚本
下面使用CSS的脚本功能，实现鼠标划上去改变背景颜色。

新建一HTML文件，加入下列代码时行测试。

<style type="text/CSS">
.showCSS{
event:e­xpression(
onmouseover = function()
{
this.style.backgroundColor='#f0f0f0'
},
onmouseout = function()
{
this.style.backgroundColor='#ffffff'
}
)
}
</style>
<div class="showCSS">把鼠标放上去试试看</div>