|M| 为了让HTML代码明了和符合规范 我的一个Button的控件的CSS 怎和来写 有Over Out Down 有的复杂 谢谢

Question

<asp:Button ID="btnRefresh" runat="server" Text="刷新" CssClass="btnRefresh" onmousedown="this.className='btnRefreshDown';" onmouseout="this.className='btnRefresh';" onmouseover="this.className='btnRefreshOver';"/>        
.btnRefresh
{
cursor: pointer;
padding-left:25px;
padding-top:3px;
font-size: 12px;
background: transparent;
border: 0px;
width: 71px;
height: 26px;
background-image: url(/Images/Button/Refresh.gif);
background-repeat: no-repeat;
}
.btnRefreshOver
{
cursor: pointer;
padding-left:25px;
padding-top:3px;
font-size: 12px;
background: transparent;
border: 0px;
width: 71px;
height: 26px;
background-image: url(/Images/Button/RefreshOver.gif);
background-repeat: no-repeat;
}
.btnRefreshDown
{
cursor: pointer;
padding-left:25px;
padding-top:3px;
font-size: 12px;
background: transparent;
border: 0px;
width: 71px;
height: 26px;
background-image: url(/Images/Button/RefreshDown.gif);
background-repeat: no-repeat;
}
以上是我的一个Button的控件的CSS
也就是三种状态 正常 鼠标在上面 鼠标按下 的三种CSS状态
以前这种写法在VS2003中是可以的
当然在VS2005也是可以的,但他会提示:属性XXX不是button的有效属性
显示这里不会出错,但总感觉不舒服
还有一个就是加上这些东西那个Button会变得很长 看起来也不好看然后我就想把这些东西添加到后台的Onload中来写
也可以实现我要的 前台的代码 看起来也简单多了
但是这样的话我后台就要对这些Button都要写这些方法 也不方便再后来听孟子说用CSS的一种好像是微软的方法在CSS里面嵌JS
但是这种方法只能在IE中在 火狐 就没用了
------------------------------------------------------
问如何能让我的前台代码只剩下<asp:Button ID="btnRefresh" runat="server" Text="刷新" CssClass="btnRefresh" />        而又不在后台为这个Button添加onmousedown .. 这些事件
而实现IE和火狐都可以正常显示成我上面的那个效果谢谢PS:晕今天 注册账号发现现在的账号每个账号只有100分 有点失望谢谢大家的支持

Answer 1

这个基本上是办不到的。
IE下用htc是可以 ff是不行的。如果一定要简化这个代码,可以用js为button动态添加事件。js做成通用函数。

Answer 2

<script >
  
  
  SetCss("btnRefresh");
  function SetCss(cid)
  {
    var obj = document.getElementById(cid);
    if(document.all)
    {
        obj.attachEvent("onmouseover",function(){obj.className='btnRefreshOver'});
        obj.attachEvent("onmouseout",function(){obj.className='btnRefresh'});
        obj.attachEvent("onmousedown",function(){obj.className='btnRefreshDown'});
    }else
    {
        obj.addEventListener("mouseover",function(){obj.className='btnRefreshOver'},false);
        obj.addEventListener("mouseout",function(){obj.className='btnRefresh'},false);
        obj.addEventListener("mousedown",function(){obj.className='btnRefreshDown'},false);
    }
  }
 </script>