鼠标移入移出功能的具体实现代码

 首先写一个当鼠标移入时显示的页面div

<div class="layui-fluid layui-col-space15 layui-form" id="mouseoverDiv" lay-filter="mouseoverDiv">
    <div class="layui-form layui-row" lay-filter="LAY-jwpx-classDetail-jwbj-info-form1">

        项目名称:<input readonly type="text" name="name" id="name" style="border:none; height: 37px" value="{{d.name || ''}}"><br>

       项目类型: <input readonly type="text" name="projectDays" id="projectDays" style="border:none; height: 37px;width: 20px"  value="{{d.params.projectDays || ''}}"><span>天</span><br>

        项目性质:<input readonly type="text" name="approveBy" id="approveBy" style="border:none; height: 37px" value="{{d.params.approveBy || ''}}"><br>

        项目周期:<input readonly type="text" name="approveBy" id="approveBy" style="border:none; height: 37px" value="{{d.params.approveBy || ''}}"><br>

        委托单位名称:<input readonly type="text" name="approveBy" id="approveBy" style="border:none; height: 37px" value="{{d.params.approveBy || ''}}"><br>

        学员人数:<input readonly type="text" name="approveBy" id="approveBy" style="border:none; height: 37px" value="{{d.params.approveBy || ''}}"><br>

        使用教室:<input readonly type="text" name="approveBy" id="approveBy" style="border:none; height: 37px" value="{{d.params.approveBy || ''}}"> <br>

        项目负责人:<input readonly type="text" name="approveBy" id="approveBy" style="border:none; height: 37px" value="{{d.params.approveBy || ''}}"><br>

        课程负责人:<input readonly type="text" name="approveBy" id="approveBy" style="border:none; height: 37px" value="{{d.params.approveBy || ''}}"><br>

        项目信息员:<input readonly type="text" name="approveBy" id="approveBy" style="border:none; height: 37px" value="{{d.params.approveBy || ''}}"><br>

        课程主任:<input readonly type="text" name="approveBy" id="approveBy" style="border:none; height: 37px" value="{{d.params.approveBy || ''}}"><br>

        教学助理:<input readonly type="text" name="teachAssistant" id="teachAssistant" style="border:none; height: 37px" value="{{d.params.approveBy || ''}}"><br>
    </div>
</div>

 写js的鼠标移入移出事件:

 $("#mouseoverDiv").hide();通过这个来实现平常状态下div是隐藏的.

在mouseover移入事件里面写$("#mouseoverDiv").show();表名当鼠标移入时进行div展示.

在mouseout移出事件里面写 $("#mouseoverDiv").hide();表名当鼠标一出事进行div隐藏.

这样就完成了鼠标移入时进行展示,鼠标移出时进行隐藏.

<script type="text/javascript">
    $("#mouseoverDiv").hide();

    function renderGant(data) {

        console.log(data);
        currentMonthStart = data.start;
        $("#ganttChart").empty();
        $("#ganttChart").ganttView({
            ganttScale: "months",// months  weeks days  hours
            showWeekends: true, //是否现在周末高亮
            showLine: true,//是否显示 当前时间线(为"周"时显示背景颜色)
            data: data.ganttData, //数据来源
            /* vtHeaderWidth: 400,//左侧任务模块宽度*/
            cellWidth: 50, //格子宽度(ganttScale = hours/weeks:宽度重新计算 最小为50)
            cellHeight: 40,//格子行高
            titileHeight: 40,//标题行高
            readOnly: true,
            start: data.start, //范围最小时间(请根据 ganttScale 参数调节初始时间范围)
            end: data.end, //范围最大时间
            slideWidth: '106%',//甘特图宽度
            excludeWeekends: true,//排除星期的最后一天
            showDayOfWeek: true,//是否显示星期
            showHolidays: false,//显示节假日
            excludeHolidays: false,//排除节假日
            gridHoverL: true,//是否显示鼠标移入效果(列)
            gridHoverH: false,//是否显示鼠标移入效果(行)
            isUnfold: true,//模块下任务超过2条 显示展开收起按钮
            unfoldConfig: false,//初始化展开/收起(模块下任务超过2条 显示展开收起按钮) true:收起



            clicked: function (selectedObj) {
                var data = selectedObj.data('block-data');
                console.log(selectedObj);
                console.log(data);
                /* location.hash = "/jwpx/class/gradeInformation";*/
                parent.openDetail(data.seriesId);

            },

            mouseover:function (selectedObj) {
                var data = selectedObj.data('block-data');
                parent.closeClass(data.seriesId);
                $("#mouseoverDiv").show();
              
            },
            mouseout:function (selectedObj) {
                var data = selectedObj.data('block-data');
                console.log(data.seriesId);
                $("#mouseoverDiv").hide();
           
            }

        });

    }

</script>