如何在datagrid中实现鼠标移动到某个单元格上就显示出一个层来显示详细的内容？

Question

在databound里对每行
Attributes.Add("onmouseover", "divID.style.display=block;")
Attributes.Add("onmouseout", "divID.style.display=none;")

Answer 1

添加样式：
 <style>
.info {position:relative;z-index:2;text-decoration:none;font-size:11px;color:#a08451;}
.info:hover {z-index:3;background:none;}
.info span {display: none;}
.info:hover span {display:block;position:absolute;top:30px;left:60px;width:130px;border:1px solid #D0D0D0; background:#fff;padding:5px;text-align:center;}
</style>
gridview的模板列<asp:TemplateField><HeaderTemplate>菜式名称</HeaderTemplate>
<ItemTemplate>
 <div style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap; padding-top: 1px;padding-right: 1px; padding-left: 1px; padding-bottom: 1px; width: 100px;">
<a class="info" href="Menu_W.aspx?ID=<%#DataBinder.Eval(Container.DataItem, "ID")%>">
<%# DataBinder.Eval(Container.DataItem, "FoodName")%>  
<span style="border:1px; width:100%">
       <div style="text-align:center">点击修改 <b><%#DataBinder.Eval(Container.DataItem, "FoodName")%></b> 的信息</div> <div style="text-align:center">
    <table width="400px" cellpadding="0" cellspacing="0"><tr><td width="190px" align="left" valign="top">
         <img src='../../<%#DataBinder.Eval(Container.DataItem, "PicturePath")%>' style="border:1px; border-color:Gray" id="imgshow" alt="" width="180px" height="110px" />
        </td>
     <td width="220px" align="left" valign="top"><font color="gray"><%#DataBinder.Eval(Container.DataItem, "FoodInfo")%></font></td>
      </tr>                                           
 </table></div></span>
 </a>
    </div>                             
 </ItemTemplate>
</asp:TemplateField>

Answer 2

请看 http://www.xproer.com/bbs/thread2.aspx?fid=349&fname=Web开发或 www.xproer.com/bbs/ -- "左边树型目录导航" -- "技术交流区" -- "Web开发" -- "高级ToolTip"

Answer 3

Click the link to solve your problem.Good luck!