鼠标移入或者移出的悬浮框实现

鼠标移入时显示悬浮框：

    悬浮框代码：

<div class="flex-model">
   <p class="title">管理</p>
   <p>您的正确率:22</p>
   <p>年级平均正确率:55</p>
</div>

悬浮框的不展示时的样式：

.flex-model{
    display:none;
    padding: 10px;
    filter:alpha(Opacity=80);
    position: absolute;
    background-color: rgba(50, 50, 50, 0.6);
    font-size: 0.373333rem;
    border-radius: 5px;
    color: #ffffff;
    z-index: 9999;
    max-width: 50%;
}

鼠标移入事件的触发：

  knowledgeRadarChart.on("mouseover", function (params) {
        if (params.componentType === "radar") {
            var newLeft=params.event.offsetX,newTop=params.event.offsetY;
            $('.flex-model').css({
   display:'initial',
   left:(newLeft+30) + 'px',
   top:newTop + 'px'
})
        }
    }, false);

鼠标移出事件：

knowledgeRadarChart.on("mouseout", function (params) {
$('.flex-model').css({
   display:'none'
})
     }, false);