Tabs при навидении мыши

Подскажите, как сделать табы при наведении мыши, а не по клику. Вот из этого примера https://codepen.io/revatto/pen/wvMzOqo

Если сменить click на mouseenter, тогда всем элементам, что внутри li тоже добавляется класс active. Если , к примеру, будет такая конструкция: Lunch

Вот результат https://codepen.io/MacDac/pen/rNdmeJx

А нужно, чтобы класс active добавлялся к родительскому элементу. То есть li

const tabs = document.querySelectorAll('[data-tab-target]');
const tabsContents = document.querySelectorAll('[data-tab-content]');

tabs.forEach(tab => {
    tab.addEventListener('click', (e) => {
        const target = document.querySelector(tab.dataset.tabTarget);

        tabsContents.forEach(tabContent => {
            tabContent.classList.remove('active');

        })

        target.classList.add('active');

        //loop through 'li' items and remove 'active' class
        tabs.forEach(tab => {
              tab.classList.remove('active');
          })

       //add 'active' class to clicked 'li' item
        e.target.classList.add("active");

    })
})