请教一个列表半透明覆盖问题

有一个列表。比如：
----------------------------------------------
a
----------------------------------------------
b
----------------------------------------------
c
----------------------------------------------
我想实现如下的功能：    鼠标移动到a区域，a区域内容半透明，并且在右边显示“编辑”“删除”，点击可对这一行进行操作。请教高手们这种功能应该如何实现？有类似的也可以。最好有代码参考，小弟js不太熟，分不够可以追加。或者提供以下思路也可以。

解决方案 »

  1.   

    使用一个浮动的div就可以。这里才有个例子
    http://www.codeproject.com/KB/scripting/transparentpopup.aspx
      

  2.   

    给你做的demo如下：<HTML>
     <HEAD>
      <meta http-equiv="Content-Type" content="text/html;charset=GBK">
      <TITLE></TITLE>
    <link href="" rel="stylesheet" type="text/css">
    <script language="javascript">
    function updatedata(id){
    //update code
    alert("update=="+id);
    }function deletedata(id){
    //delete code
    alert("del==="+id);
    }function show(id){
    document.getElementById('div'+id).style.display='block';
    }
    function hidden(id){
    document.getElementById('div'+id).style.display='none';
    }
    </script>
     </HEAD>
     <BODY>
     <table>
     <tr  onmouseover="show(1)" onmouseout="hidden(1)">
     <td>第a行</td>
     <td>
     <div id='div1' style="display:none"><button onclick="updatedata('aaaa')">编辑</button><button onclick="deletedata('aaa')">删除</button></div>
     </td>
     </tr>  <tr onmouseover="show(2)" onmouseout="hidden(2)">
     <td>第b行</td>
     <td>
     <div id='div2' style="display:none"><button onclick="updatedata('bbb')">编辑</button><button onclick="deletedata('bbb')">删除</button></div>
     </td>
     </tr>
     </table> </BODY>
    </HTML>
      

  3.   


    <html>
        <head>
            <meta http-equiv="content-type" content="text/html; charset=utf-8">
            <META http-equiv="Content-Style-Type" content="text/css">
        </head>
         <script language=javascript>
                var t, n, c;
                var lastrow;
                window.onload=function(){
                    t = document.getElementById("tb");
                    n = t.rows.length;
                    for(var i=0;i<n;i++){
                        t.rows[i].onmouseover = function(){
                            document.getElementById("movediv").style.display="block"
                            if(lastrow) lastrow.style.backgroundColor="#ffffff";
                            document.getElementById("movediv").style.top=this.offsetTop+10;
                            lastrow=this;
                            this.style.backgroundColor="#cceeff";
                        };
                        t.rows[i].onmouseout = function(){
                            document.getElementById("movediv").style.display="none"
                        };
                    }             
                }
            </script>
        <body >
           
            <div id=movediv style="position:absolute;height:20px;z-index:2;left:125px;display:none"><input type="button" value="编辑"><input type="button" value="删除"></div>
            <table id="tb" border=1px gray>
                <tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
                <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
                <tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
                <tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr>
                <tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td></tr>
            </table>    </body>
    </html>