JQ实现鼠标悬停显示或隐藏DIV层　　　　来源 CIOZJ　记者
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
 
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
    $("#div1").hide();   //先将层隐藏起来
   
    var canHide = false; //标记是否可隐藏层
    function doHide(){   //是否隐藏层中这里处理
     if(canHide)
      $("#div1").hide();
    }
   
    $("#a1").hover(function(){ //鼠标进入
     $("#div1").show(); //显示
     canHide = false; //标记不可隐藏
    },function(){  
     canHide = true; //鼠标移出可隐藏
     window.clearTimeout(t); //将上次的定时器清除,重新设置
     var t = window.setTimeout(doHide,1000); //在间隔1000毫秒后执行是否隐藏处理
    }
    );
    //主要依靠定时器来将两者关联起来
    $("#div1").hover(function(){ //鼠标进入
     canHide = false;    //不可隐藏
    },function(){
     canHide = true;     //鼠标移出可隐藏
     window.clearTimeout(t);
     var t = window.setTimeout(doHide,1000);
    });
   });
</script>
<style type="text/css">
   .div{
    position: absolute;
    width: 50px;;
    height: 50px;
    filter:alpha(opacity=30);
    opacity:   0.2;
    -moz-opacity:0.2;
    background: gray;
   }
</style>
</head>
<body scroll="no">
<a href="#" id="a1">测试测试</a>
<div id="div1" class="div"></div>
</body>
< /xml>
 
（二）鼠标放在链接文本上显示层，离开链接文本则层消失，像这样的，只要利用onmouseover,onmouseout事件即可（documnet.getElement.ById('div').style.display="none"/"block")
 
（三）还有一种呢，就是对datalist控件中标有链接的列实现鼠标悬停效果，鼠标停在哪一行的链接上则显示该行相应的信息或是显示相应图片之类的。像这样的效果，昨天同事告诉我一方法，我试了一下，效果是实现了，不过可能会有点麻烦，和大家分享一下。
 
大体的思路就是在datalist中的每一行里添加一个层，当鼠标移到该行的链接上时显示或是隐藏该层。
 
代码：
 
<div onmouseover="showName('dvName_<%# Container.ItemIndex%>')" onmouseout="showName2('dvName_<%# Container.ItemIndex%>')"
                                            style="cursor: pointer;">
                                            商品名：点击查看<u>
                                                <%#Eval("ITEMNAME")%>
                                            </u>
                                            <div id="dvName_<%# Container.ItemIndex%>" class="flnone" align="center">
                                                <div style="background: White;">
                                                    物流号：<%#Eval("TXLOGISTICID")%></div>
                                                <asp:GridView ID="gvItems" runat="server" AutoGenerateColumns="false" Width="100%"
                                                    CellPadding="0" CssClass="box5">
                                                    <RowStyle BackColor="White" HorizontalAlign="Center" />
                                                    <Columns>
                                                        <asp:BoundField DataField="row" HeaderText="行号" />
                                                        <asp:BoundField DataField="itemName" HeaderText="商品名称" />
                                                        <asp:BoundField DataField="number" HeaderText="数量" />
                                                        <asp:BoundField DataField="remark" HeaderText="备注" />
                                                    </Columns>
                                                    <HeaderStyle BackColor="#999999" Font-Bold="True" ForeColor="White" Font-Size="12px" />
                                                </asp:GridView>
                                            </div>
                                        </div>
 
样式表：
 
<style>
     .postitle{filter:alpha(opacity=80);-moz-opacity:0.8;opacity: 0.8;background: url(http://www.w3css.com/down/jt.gif) 0 -10px no-repeat; margin-top: -12px; float:left;margin-left:70px;*margin-left:-40px; position:absolute;}
     .flnone{ display:none; }
</style>
 
脚本：
 
<script language="javascript" type="text/javascript">
function showName(obj) {
 
    var divName = document.getElementById(obj);
    divName.className = "postitle";
}
function showName2(obj) {
 
    var divName = document.getElementById(obj);
    divName.className = "flnone";
   // divName.style.display = "none";
}
</script>
 
gvItems数据绑定：
 
           for (int i = 0; i < count; i++)
           {
               GridView gvItems = (GridView)rpOderFilter.Items[i].FindControl("gvItems");
               string dsLog = ds.Tables[0].Rows[i]["TXLOGISTICID"].ToString();
               gvItems.DataSource = SQLServerDAL.HQ.CuPrelation.SeItems(dsLog);
               gvItems.DataBind();
           }

 

关联文档