鼠标hover表格头部信息出现闪烁

在做下面这种表格的时候要求加入hover提示,鼠标hover上去出现提示信息,离开图标提示信息消失。

有时会出现hover上去不断闪烁的现象。

可以从下面3个方面试着解决:

1. 换成mouseenter事件和mouseleave事件

2. 加入setTimeout可以延时100到300毫秒触发

3. hover的元素要加一句样式:pointer-events: none;

鼠标hover表格头部信息出现闪烁_第1张图片

// 设置鼠标移入thead显示提示语
$('.table tr th .th-hover-area').each(function (index) {
    $(this).find('.newUserHover').mouseenter(function(){
        setTimeout(function () {
            $('.newUserTip').eq(index).show();
        },300);
    }).mouseleave(function(){
        setTimeout(function () {
            $('.newUserTip').eq(index).hide();
        },300);
    })
});  

给newUserTip样式加:pointer-events: none;  /* 禁止鼠标hover上去出现闪烁的情况 */

你可能感兴趣的:(CSS)