日历控件，当鼠标悬停在某一天时，出现一个显示数据库中该天数据的对话框

这个是公司职工的日志管理系统，我用一个日历控件能显示哪天写没写日志，但是想当鼠标悬停在某一天时，如果这一天写了日志，就把数据库中这天的日志表WorkLog中字段LogContent内容弹出一个框显示出来。当鼠标移走时，这个框就消失。最好给出详细的代码。

解决方案 »

  1.   

    处理鼠标事件，使用ajax读取数据
      

  2.   

    就是鼠标悬浮DIV呗<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>jq-hover.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../../js/jquery-1.4.2.js"></script>
        <script type="text/javascript">
        $(function(){     //显示内容DIV
           var showDiv = document.getElementById('showDiv');   //默认不显示
           showDiv.style.display="none"; //添加鼠标动作监听
           $('tr').hover(function(e){
                $('#show').html(getText(this));
                DialogSwitch('showDiv','block',mouseOffset(e).left,getOffset($(this).attr('id')).top);
           },function(){
                $('#show').html(getText(this));
                DialogSwitch('showDiv','none',0,0);
           });
        });
        function  getText(id){
          return $(id).find('td:eq(0)').html();
        }//弹出框开关控制
        function DialogSwitch(id,sty,l,t){
         var showDiv = document.getElementById(id);    //此属性一定要设置
         showDiv.style.position="absolute";   //显示隐藏控制
         showDiv.style.display=sty;
       //设置DIV显示位置
         showDiv.style.marginLeft=l;
         showDiv.style.marginTop= (t-getOffset(id).top);
        }//获取鼠标所在元素的位移
        function getOffset(id){
            var left = $('#'+id).offset().left;
            var top  = $('#'+id).offset().top;
            return {left:left,top:top};
        }
        var Mouse = function(e){
                mouse = new MouseEvent(e);
                var leftpos = mouse.x;
                var toppos = mouse.y;
                return {left:leftpos,top:toppos};
            }//获取鼠标位置
            function mouseOffset(e){
                var  mouse = new MouseEvent(e);
                var leftpos = mouse.x;
                var toppos = mouse.y;
                return {left:leftpos,top:toppos};
            }
            //获取鼠标坐标函数
            var MouseEvent = function(e) {
                this.x = e.pageX
                this.y = e.pageY
            }    </script>
      </head>
      
      <body>
        <div>
           <table border="1" cellspacing="0" width="600">
            <tr id="1"><td>A</td></tr>
            <tr id="2"><td>B</td></tr>
            <tr id="3"><td>C</td></tr>
            <tr id="4"><td>D</td></tr>
           </table>
           <div id="showDiv" style="background-color:#888888">
        <div id="test">EEEEEEEEE</div>
        <div id="show"></div>
        </div>
        </div>
        
      </body>
    </html>