关于计时器的一个问题

我在免费课程那里学习了开发tab选项卡，我开发完后发现一个现象：

当鼠标移进页签时，清除计时器，当鼠标离开页签时，启动计时器，这是课程的正常逻辑。

但我想到一个用户体验，当鼠标移进某个页签时，下面会出现该页签对应的内容，那如果我想当鼠标放到该页签对应的内容上，计时器也不启动，只有当鼠标完全离开页签和对应的内容时，计时器才重新启动，这算是一个小bug吗？如果按照我的逻辑，那该如何加上鼠标放到该页签对应的内容上，计时器也不启动这个逻辑？

function tab() {

    //index值表示当前默认显示的第1个索引

    var index = 0;

    var timer = null;

    //获取所有的选项卡和需要切换的内容

    var tabNavUl = $('tab-nav-ul').getElementsByTagName('li');

    var tabNavContent = $('tab-nav-content').getElementsByTagName('div');

    //添加鼠标滑动切换选项卡事件

    for (var i = 0; i < tabNavUl.length; i++) {

        tabNavUl[i].value = i;

        tabNavUl[i].onmouseover = function () {

            clearInterval(timer);

            // 清除所有li上的active类名

            chaneOption(this.value);

        }

        tabNavUl[i].onmouseout = function () {

            //当鼠标离开选项卡时，再次启动计时器

            timer = setInterval(autoPlay, 2000);

        }

    }

    //清除定时器

    if (timer) {

        clearInterval(timer);

        timer = null;

    }

    //添加定时器，改变当前显示的索引

    timer = setInterval(autoPlay, 2000);

    //把定时器的脚本封装成一个函数

    function autoPlay() {

        index++;

        if (index >= tabNavUl.length) {

            index = 0;

        }

        chaneOption(index);

    }

    //封装一个函数，把遍历语句和类名语句放到该函数内

    function chaneOption(curIndex) {

        for (var j = 0; j < tabNavUl.length; j++) {

            tabNavUl[j].className = '';

            tabNavContent[j].className = '';

        }

        tabNavUl[curIndex].className = 'active';

        tabNavContent[curIndex].className = 'current';

        index = curIndex;

    }

}